Native Map-Renderer auf alle Objekte anwenden

Question

Ich arbeite an einer kleinen Kartenanwendung mit react-native-maps. Ich versuche, eine schwebende Aktionsknopf oben auf der Karte zu rendern, aber während ich es für eine Sekunde blitzschnell sehe, sobald die Karte rendert, sitzt sie direkt über der Schaltfläche.

render() { 
     return (
      <View style={{flex:1, backgroundColor: '#f3f3f3'}}> 
      <MapView ref="map" mapType="terrain" style={styles.map} region={this.state.region} onRegionChange={this.onRegionChange}> 
       <MapView.Marker coordinate={{latitude: this.state.region.latitude, longitude: this.state.region.longitude}}> 
       <View style={styles.radius}> 
        <View style={styles.marker} /> 
       </View> 
       </MapView.Marker> 
      </MapView> 

      <ActionButton buttonColor="rgba(231,76,60,1)" style={styles.actionButton}> 
       <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}> 
       <Icon name="rocket" style={styles.actionButtonIcon} /> 
       </ActionButton.Item> 
       <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}> 
       <Icon name="rocket" style={styles.actionButtonIcon} /> 
       </ActionButton.Item> 
       <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}> 
       <Icon name="rocket" style={styles.actionButtonIcon} /> 
       </ActionButton.Item> 
      </ActionButton> 
      </View> 
     ); 
     } 
    } 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    map: { 
    width: width, 
    height: height, 
    zIndex: 998 
    }, 
    radius: { 
    height: 50, 
    width: 50, 
    borderRadius: 50/2, 
    overflow: 'hidden', 
    backgroundColor: 'rgba(0, 122, 255, 0.1)', 
    borderWidth: 1, 
    borderColor: 'rgba(0, 122, 255, 0.3)', 
    alignItems: 'center', 
    justifyContent: 'center' 
    }, 
    marker: { 
    height: 20, 
    width: 20, 
    borderWidth: 3, 
    borderColor: 'white', 
    borderRadius: 20/2, 
    overflow: 'hidden', 
    backgroundColor: '#007AFF' 
    }, 
    actionButton: { 
    position: 'absolute', 
    width: 20, 
    height: 20, 
    top: 10, 
    left: 10, 
    zIndex: 999 
    }, 
    actionButtonIcon: { 
    fontSize: 20, 
    height: 22, 
    color: 'white' 
    } 
}); 

Answer 1

passiert, ich hatte das gleiche Problem: Ich werde meinen Code machen und Stile unten einfügen. Ich löste, indem ich der Karte einen Z-Index von negativ gab.
Auch habe ich flex: 1, statt Breite und Höhe verwendet, aber das sollte keinen Unterschied machen.

Like:

map: { 
    width: width, 
    height: height, 
    zIndex: -1 
    }, 
    actionButton: { 
    position: 'absolute', 
    width: 20, 
    height: 20, 
    top: 10, 
    left: 10, 
    zIndex: 10 
    }, 

Answer 2

es ist eine lange gedreht, aber versuchen position: 'absolute' auf Ihre Kartenstile hinzufügen und seine Koordinaten festgelegt und sehen, was