在MapView组件中布局和渲染视图-React native

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

我发现必须将地图键视图包装在<Fragment/>组件的<MapView>组件outside中。我还必须使用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>