React Native：別のコンポーネントの上にあるコンポーネント

Question

react-native-mapsとreact-native-google-places-autocompleteを使用して、ロケーションベースのiOSアプリケーションを構築しています。

私のコードでは、最初に検索バーコードがあり、マップコードが2番目にあります。これは、検索バーが地図の上にレンダリングされるためです。問題は、検索バーのコンポーネントが画面全体を占める透明な要素を持つように見えるため、マップを移動できないことです。検索バーが削除されると、地図を移動できます。どのようにして地図の上に検索バーを置くことができ、地図も移動できます。

私がやろうとしていることをやり遂げるには、代わりの方法があります。

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', 
      }, 
      .....