在 MapView 组件中布局和渲染视图 - 反应原生

Question

我对 React native 相当陌生。我在我的屏幕上创建了一个 MapView 组件，并试图添加一个地图键来指示每个标记颜色是什么。我能够做到这一点只是发现当我离开并返回该屏幕时布局错误

示例

这就是我想要实现的目标

这就是我不断得到的

这是我的代码

<SafeAreaView style={{ flex: 1, backgroundColor: '#376772' }}>
        <View style={{ flex: 0.6 }}>
            <MapView
                style={{ flex: 1 }}
                showsMyLocationButton={true}
                showsUserLocation={true}
                followsUserLocation={lock}
                onTouchStart={() => {
                    set(false)
                }}
                onPress={(loc) => {
                    setLocation(loc.nativeEvent.coordinate)
                }}
            >
                   {/* Map key view begins here */}
                <View
                    style={{
                        alignSelf: 'center',
                        alignContent: 'center',
                        backgroundColor: '#202B35',
                        padding: 10,
                        paddingHorizontal: 35,
                        margin: 5,
                        borderRadius: 5,
                        alignItems: 'center',
                    }}
                >
                    <View style={{ flexDirection: 'row' }}>
                        <Badge
                            status="error"
                            containerStyle={{ padding: 5 }}
                        />
                        <Text
                            style={{
                                color: '#fff',
                                fontSize: 16,
                                marginBottom: 5,
                            }}
                        >
                            New Crossing
                        </Text>
                    </View>

                    <View style={{ flexDirection: 'row' }}>
                        <Badge
                            status="primary"
                            containerStyle={{ padding: 5 }}
                        />
                        <Text style={{ color: '#fff', fontSize: 16 }}>
                            {'Existing Crossings'}
                        </Text>
                    </View>
                </View>
                <Marker coordinate={location} />
            </MapView>
        </View>

任何帮助将不胜感激。如果我错过了这篇文章的任何重要信息，请告诉我。

Answer 1

我发现我必须将 ma​​p key View 包装在 <Fragment/> 组件 outside <MapView> 组件中。我还必须使用position:"absolute" 对其进行样式设置

这是我的代码

<View style={{ flex: 0.6 }}>
            <MapView
                style={{ flex: 1 }}
                showsMyLocationButton={true}
                showsUserLocation={true}
                followsUserLocation={lock}
                onTouchStart={() => {
                    set(false)
                }}
                onPress={(loc) => {
                    setLocation(loc.nativeEvent.coordinate)
                }}
            >
                <Marker coordinate={location} />
            </MapView>
            <Fragment>
                <View
                    style={{
                        alignSelf: 'center',
                        alignContent: 'center',
                        backgroundColor: '#202B35',
                        padding: 10,
                        paddingHorizontal: 35,
                        margin: 5,
                        borderRadius: 5,
                        alignItems: 'center',
                        position: 'absolute',
                    }}
                >
                    <View style={{ flexDirection: 'row' }}>
                        <Badge
                            status="error"
                            containerStyle={{ padding: 5 }}
                        />
                        <Text
                            style={{
                                color: '#fff',
                                fontSize: 16,
                                marginBottom: 5,
                            }}
                        >
                            New Crossing
                        </Text>
                    </View>

                    <View style={{ flexDirection: 'row' }}>
                        <Badge
                            status="primary"
                            containerStyle={{ padding: 5 }}
                        />
                        <Text style={{ color: '#fff', fontSize: 16 }}>
                            {'Existing Crossings'}
                        </Text>
                    </View>
                </View>
            </Fragment>
        </View>