Как разместить изображение в центре MapView в ответе родной

Question

Я могу получить его в центр без отображения карты, но я не могу получить изображение в центре с помощью mapview. любой, кто может это сделать, реагирует на родной?

render() { 
     return (
      <View style = { styles.container }> 

      <MapView style = { styles.mapView }></MapView> 

      <View style = { styles.mapCenterMarkerView }> 
        <Image style={styles.mapCenterMarker} 
         source={{uri: this.state.markerIcon}}/> 
        </View> 
    ); 
    } 

var styles = StyleSheet.create({ 

      container: { 
       flex: 1, 
      }, 

      mapView: { 
       flex: 1 
      }, 

      mapCenterMarkerView: { 
       top: 0, 
       position: 'absolute', 
       justifyContent: 'center', 
       alignItems: 'center', 
       backgroundColor: 'rgba(0,0,0,0)', 
      }, 

      mapCenterMarker: { 
       width: 32, 
       height: 32, 
      }, 
     }); 

Answer 1

Я двигаюсь justifyContent: «центр» вниз из контейнера для его работы. спасибо вам, потому что у меня есть внутри.

container: { 
     flex: 1, 
     alignItems: 'center', 
     backgroundColor: 'rgba(0,0,0,0)', 
    }, 

    mapView: { 
     position: 'absolute', 
     top: 0, 
     bottom: 0, 
     left: 0, 
     right: 0, 
    }, 

    mapCenterMarkerView: { 
     flex: 1, 
     justifyContent: 'center', 
     backgroundColor: 'rgba(0,0,0,0)', 
    }, 

    mapCenterMarker: { 
     width: 32, 
     height: 32, 
     backgroundColor: 'rgba(0,0,0,0)' 
    }, 

Answer 2

Я был в состоянии получить результат, который вы ищете, но я должен был удалить гибкий стиль от MapView.

https://rnplay.org/apps/TQGKjA

Похоже, MapView не позволяет дочерние узлы. Вероятно, есть способ сделать это, не прибегая к position: 'absolute' для MapView, но мне придется поиграть с ним еще немного.

Если вы новичок в Flexbox, как я, я нашел, что это хороший ресурс: flexboxin5.com

class SampleApp extends React.Component { 
    render() { 
    return (
     <View style={ styles.container }> 
     <MapView style={ styles.mapView }></MapView> 
     <View style={styles.mapCenterMarker} /> 
     </View> 
    ); 
    } 
} 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: 'rgba(0,0,0,0)', 

    }, 

    mapView: { 
    position: 'absolute', 
    top: 20, 
    bottom: 0, 
    left: 0, 
    right: 0, 
    }, 

    mapCenterMarkerView: { 
    flex: 1, 
    }, 

    mapCenterMarker: { 
    width: 32, 
    height: 32, 
    backgroundColor: 'black' 
    }, 
});