在不透明的情况下反应本机列表答案

【问题标题】：react native list without transparency在不透明的情况下反应本机列表
【发布时间】：2019-04-08 10:55:33
【问题描述】：

我遇到了以下问题：我想使用 google maps places api 实现一个位置搜索栏来生成结果。一切正常，但列表视图（其位置道具设置为绝对）似乎是透明的。

我已经尝试将容器不透明度设置为 1，但这没有帮助。有人可以告诉我我需要更改什么以使容器中不可见的底层测试文本吗？

我的代码：位置选择器：

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

干杯！

【问题讨论】：

您可以尝试将文本放入 SafeAreaView 吗？

标签： reactjs react-native view position scrollview

【解决方案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
    }

【讨论】：

在 styles.safeArea 中尝试 zIndex