Question

我可以在没有mapview的情况下将它带到中心但我似乎无法通过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

我移动了理由内容：＆＃39; center＆＃39;从容器下来工作。谢谢你，因为我有一个内部。

    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中删除flex样式。

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

如何将图像放置在MapView的中心以反应原生

2 个答案: