ネイティブマップレンダリングをすべての上にリバース

Question

私は、反応ネイティブマップを使用して、小さなマップアプリケーションに取り組んでいます。私はマップの上にフローティングアクションボタンを描画しようとしていますが、地図がレンダリングされるとすぐに、ボタンのすぐ上に座っています。私は同じ問題を抱えていた、それはロングショットで

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

を何が起こるかを参照してください。私は下に私のレンダリングコードやスタイルを貼り付けます。私は地図に負のZ-インデックスを与えることで解決しました。
また、幅と高さの代わりにflex: 1,を使用しましたが、違いはありません。

のように：どのように問題のスクリーンショットについて

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

Answer 2

が、あなたのマップスタイルにposition: 'absolute'を追加しようとその座標を設定し、