собственный список react без прозрачности

#reactjs #react-native #view #position #scrollview

#reactjs #react-native #Вид #позиция #scrollview

Вопрос:

У меня возникла следующая проблема: я хочу реализовать панель поиска местоположения с помощью API Google maps places для получения результатов. Все работает, но listview (для параметра position prop установлено значение absolute) кажется прозрачным.

я уже пытался установить непрозрачность контейнеров на 1, но это не помогло. может кто-нибудь сказать мне, что мне нужно изменить, чтобы сделать нижележащий тестовый текст не видимым в контейнере?

мой код: locationPicker:

 <View style={styles.modalContainer}>
                            <SafeAreaView style={styles.safeArea}>
                                <View style={styles.searchContainer}>
                                    <LocationSearchBar/>
                                </View>
                            </SafeAreaView>


                            <View style={styles.modalContent}>
                                <Text>test</Text>
                            </View>
                          

                        </View>
                        
searchContainer: {
        alignItems: "center",
        justifyContent: "center",
        minHeight: 60,
        paddingHorizontal: 16,
        paddingVertical: 10,
        backgroundColor: theme.colors.screen.alter
    }

Панель поиска местоположений:

 <React.Fragment>

                        <TextInput
                            autoCorrect={false}
                            onChangeText={handleTextChange}
                            value={inputValue}
                            label={<Icon name={"search"} />}
                            placeholder={"Search location..."}
                        />
                        <ScrollView style={styles.autoCompleteResultList}>
                            {locationResults.map((el, i) => (
                                <AutoCompleteItem
                                    {...el}
                                    fetchDetails={fetchDetails}
                                    key={String(i)}
                                />
                            ))}
                        </ScrollView>

                    </React.Fragment>
       
AutoCompleteItem:
<View style={styles.autoCompleteItemContainer}>
                <RkText rkType={"primary2"}>{this.props.structured_formatting.main_text}</RkText>
                <RkText rkType={"primary1"}>{this.props.structured_formatting.secondary_text}</RkText>
            </View>



autoCompleteItemContainer: {
        backgroundColor: "red",
        paddingHorizontal: 5,
        paddingVertical: 5
    },
    autoCompleteResultList: {
        maxHeight: 200,
        position: "absolute",
        backgroundColor: theme.colors.screen.alter,
        width: "100%",
        top: 55
    }

приветствия!

Ответ №1:

Я думаю, что это не проблема цвета фона или непрозрачности.

Кажется, проблема наложения вашей позиции: абсолютные и стандартные представления

тест является обычным или стандартным, поэтому он имеет наивысший приоритет для перехода к любой позиции: абсолютные представления.

следовательно, тест выше результатов.

Вам нужно будет изменить эту позицию и сделать результат выше теста.

так что сделайте это с помощью zIndex.

 autoCompleteResultList: {
        maxHeight: 200,
        position: "absolute",
        backgroundColor: theme.colors.screen.alter,
        width: "100%",
        top: 55,
        zIndex:1 // highest number of zIndex in your current screen if you have other zIndex
    }