Ios React Native：位于另一个组件之上的组件

我正在使用

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);

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
看法
尺寸
}从“反应本机”；
从“react native maps”导入MapView；
var{GooglePlacesAutocomplete}=require（'react-native-google-places-autocomplete'）；
const homePlace={description:'Home'，几何体：{location:{lat:42.3969，lng:-71.1224}}}；
const workPlace={description:'Work'，几何体：{location:{lat:42.3，lng:-71.1}}；
var screenWidth=Dimensions.get（'window'）.width；
导出默认类myapp扩展组件{
render（）{
返回(
row.description}//自定义描述呈现
onPress={（data，details=null）=>{//'details'在fetchDetails=true时提供
console.log（数据）
console.log（详细信息）
}}
getDefaultValue={（）=>{
返回“”；//文本输入默认值
}}
质疑={{
//可用选项：https://developers.google.com/places/web-service/autocomplete
关键字：“Aizasyauyfbktctkiibogfnn2x9xg9i0svxlhq”，
语言:"en",，
类型：“地理代码”
}}
风格={{
说明：{
fontWeight:'粗体'，
},
预定义位置说明：{
颜色：“#1faadb”，
},
textInputContainer：{
背景颜色：“rgba（0,0,0,0）”，
前15名，
宽度：屏幕宽度-10，
边框宽度：0
},
文本输入：{
marginLeft:0，
marginRight:0，
身高：38，
颜色：“#5d5d5d”，
尺寸：16，
边框宽度：0
},
列表视图：{
背景颜色：“rgba（1920,0.9）”，
top:23
}
}}
currentLocation={true}
currentLocationLabel=“当前位置”
nearbyPlacesAPI='GooglePlacesSearch'
谷歌反向分类查询={{
//谷歌反向编码API的可用选项：https://developers.google.com/maps/documentation/geocoding/intro
}}
GooglePlacesSearchQuery={{
//Google PlacesSearch API的可用选项：https://developers.google.com/places/web-service/search
兰比：“距离”，
类型：“食物”
}}
filterReverseGeocodingByTypes={['地区'、'行政区\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别\级别]}
//如果只想显示城市，请按类型过滤反向地理编码结果-['Location'、'administrative_area_level_3']
预定义地点={[homePlace，workPlace]}
去盎司={200}
//renderLeftButton={（）=>}
renderLeftButton={（）=>}
renderRightButton={（）=>}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
地图：{
左:0,，
右:0,，
排名：0，
底部：0，
位置：'绝对'
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
},
说明：{
textAlign:'中心'，
颜色：'#333333'，
marginBottom:5，
},
});
AppRegistry.registerComponent（'myapp'，（）=>myapp）；

---

将位置样式添加到

react native google places autocomplete

样式属性：

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

---

这可能是由于您正在使用的组件，

googleplacesautomplete

，它有一个符合屏幕边界的

ListView

，因此包含的视图也会执行相同的操作，即阻止对地图的触摸事件。