Компоновка и рендеринг View в компоненте MapView - React native - PullRequest
Новая
       47

Компоновка и рендеринг View в компоненте MapView - React native

0 голосов
/ 01 апреля 2020

Я довольно новичок в React native. Я создал компонент MapView на своем экране и пытаюсь добавить ключ карты, который указывает, какой цвет каждого маркера. Я смог добиться этого только для того, чтобы выяснить, что компоновка выдает ошибку, когда я ухожу и возвращаюсь к этому экрану

Пример

Это то, что я ' я пытаюсь достичь

enter image description here

Это то, что я продолжаю получать

enter image description here

Это мой код 

<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>

Любая помощь будет очень признательна. пожалуйста, дайте мне знать, если мне не хватает важной информации в этом сообщении.

1 Ответ

0 голосов
/ 01 апреля 2020

Я обнаружил, что должен обернуть свой ключ карты View в <Fragment/> Компонент вне компонента <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>
...