ios - react 原生 : component on top of another component

Question

我正在使用 react-native-maps 构建基于位置的 iOS 应用程序和 react-native-google-places-autocomplete .

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

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

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

Answer 1

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

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