javascript - 如何在 react native 中将图像定位在 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 中删除 flex 样式。

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