Javascript 如何在react native中将图像定位在MapView的中心

我可以在没有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,
            },
        });

render（）{
返回(
);
}
var styles=StyleSheet.create({
容器：{
弹性：1，
},
地图视图：{
弹性：1
},
mapCenterMarkerView：{
排名：0，
位置：'绝对'，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“rgba（0,0,0,0）”，
},
地图中心标记：{
宽度：32，
身高：32，
},
});

我能够得到您想要的结果，但我不得不从MapView中删除flex样式

看起来MapView不允许子节点。也许有一种方法可以做到这一点，而不必在地图视图中使用

位置：'absolute'

，但我还需要进一步使用它

如果您像我一样是flexbox的新手，我发现这是一个很好的资源：

class SampleApp扩展了React.Component{
render（）{
返回(
);
}
}
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“rgba（0,0,0,0）”，
},
地图视图：{
位置：'绝对'，
前20名，
底部：0，
左:0,，
右:0,，
},
mapCenterMarkerView：{
弹性：1，
},
地图中心标记：{
宽度：32，
身高：32，
背景颜色：“黑色”
},
});

我能够得到您想要的结果，但我不得不从MapView中删除flex样式

看起来MapView不允许子节点。也许有一种方法可以做到这一点，而不必在地图视图中使用

位置：'absolute'

，但我还需要进一步使用它

如果您像我一样是flexbox的新手，我发现这是一个很好的资源：

class SampleApp扩展了React.Component{
render（）{
返回(
);
}
}
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“rgba（0,0,0,0）”，
},
地图视图：{
位置：'绝对'，
前20名，
底部：0，
左:0,，
右:0,，
},
mapCenterMarkerView：{
弹性：1，
},
地图中心标记：{
宽度：32，
身高：32，
背景颜色：“黑色”
},
});

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

---

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

---

我尝试了这个解决方案，但我无法拖动地图，因为它现在被一个新组件覆盖了。为了解决这个问题，我将mapCenterMarkerView的宽度设置为0，并使用“左”和“下”来定位我的图像。我尝试了这个解决方案，但无法拖动地图，因为它现在被一个新组件覆盖。为了解决这个问题，我给mapCenterMarkerView一个0的宽度，并使用left和bottom来定位我的图像