如何在反应本机中将图像定位在 MapView 的中心

Question

我可以在没有 mapview 的情况下将它放到中心，但我似乎无法通过 mapview 将图像放到中心。有人能在 React Native 上做到吗？

    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

我能够得到您要查找的结果，但我必须从 MapView 中删除弹性样式。

https://rnplay.org/apps/TQGKjA

MapView 似乎不允许子节点。可能有一种方法可以在不为 MapView 求助于 position: 'absolute' 的情况下执行此操作，但我必须再使用它一些。

如果你像我一样是 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'
  },
});

Answer 2

我将 justifyContent: 'center' 从容器中下移，以使其正常工作。谢谢你，因为我有一个里面 .

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

如何在反应本机中将图像定位在 MapView 的中心

How to position image in the center of MapView in react native

javascript

css

reactjs

react-native