React Native：在另一个组件之上的组件

Posted 2023-03-15

【中文标题】React Native：在另一个组件之上的组件

【英文标题】：React Native: component on top of another component

【发布时间】：2017-04-30 18:53:38

【问题描述】：

我正在使用react-native-maps 和react-native-google-places-autocomplete 构建一个基于位置的ios 应用程序。

在我的代码中，我首先有搜索条形码，然后是地图代码 - 这样搜索栏就会呈现在地图顶部。问题是，我无法移动地图，因为搜索栏组件似乎有一个占据整个屏幕的透明元素。删除搜索栏后，我可以移动地图。如何将搜索栏放在地图顶部并移动地图。

我欢迎替代/更好的方式来做我想做的事情。

import React,  Component  from 'react';
import 
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions
 from 'react-native';
import MapView from 'react-native-maps';
var GooglePlacesAutocomplete = require('react-native-google-places-autocomplete');

const homePlace = description: 'Home', geometry:  location:  lat: 42.3969, lng: -71.1224  ;
const workPlace = description: 'Work', geometry:  location:  lat: 42.3, lng: -71.1  ;

var screenWidth = Dimensions.get('window').width;

export default class myapp extends Component 
  render() 
    return (
    <View style=styles.container>


        <MapView
            style=styles.map
            initialRegion=
                latitude: 42.3967,
                longitude: -71.1223,
                latitudeDelta: 0.0922,
                longitudeDelta: 0.0421,
            >
            <MapView.Marker
                coordinate=
                    latitude: 42.3967,
                    longitude: -71.1223
                />
        </MapView>



        <GooglePlacesAutocomplete
            placeholder='Search location'
            minLength=2
            autoFocus=false
            autoCorrect=false
            listViewDisplayed='auto'        // true/false/undefined
            fetchDetails=true
            renderDescription=(row) => row.description    // custom description render
            onPress=(data, details = null) =>     // 'details' is provided when fetchDetails = true
                console.log(data)
                console.log(details)
            
            getDefaultValue=() => 
                return '';      // text input default value
            
            query=
                // available options: https://developers.google.com/places/web-service/autocomplete
                key: 'AIzaSyAUYfbKtctkIibOgFnNN2x9Xg9i0sVxlhQ',
                language: 'en',
                types: 'geocode'
            
            styles=
                description: 
                    fontWeight: 'bold',
                ,
                predefinedPlacesDescription: 
                    color: '#1faadb',
                ,
                textInputContainer: 
                    backgroundColor: 'rgba(0,0,0,0)',
                    top: 15,
                    width: screenWidth-10,
                    borderWidth: 0
                ,
                textInput: 
                    marginLeft: 0,
                    marginRight: 0,
                    height: 38,
                    color: '#5d5d5d',
                    fontSize: 16,
                    borderWidth: 0
                ,
                listView: 
                    backgroundColor: 'rgba(192,192,192,0.9)',
                    top: 23
                
            

            currentLocation=true
            currentLocationLabel="Current location"
            nearbyPlacesAPI='GooglePlacesSearch'
            GoogleReverseGeocodingQuery=
                // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
            
            GooglePlacesSearchQuery=
                // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
                rankby: 'distance',
                types: 'food'
            

            filterReverseGeocodingByTypes=['locality', 'administrative_area_level_3', 'sublocality', 'administrative_area_level_2', 'administrative_area_level_1']
            // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities

            predefinedPlaces=[homePlace, workPlace]

            debounce=200
            //renderLeftButton=() => <Image source=require('left-icon') />
            renderLeftButton=() => <Text></Text> 
            renderRightButton=() => <Text></Text> 


        />


      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  ,
  map: 
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    position: 'absolute'
  ,
  welcome: 
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  ,
  instructions: 
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  ,
);

AppRegistry.registerComponent('myapp', () => myapp);

【问题讨论】：

这可能是由于您正在使用的组件，GooglePlacesAutocomplete，它有一个适合屏幕边界的ListView，因此包含视图也将执行相同的阻塞操作触摸事件到地图。

【参考方案1】：

将位置样式添加到react-native-google-places-autocomplete 样式属性：

styles=
          container:
            position: 'absolute',
            top: 0
          ,
            description: 
                fontWeight: 'bold',
            ,
          .....