下拉列表在 View 元素下展开

Question

我正在使用来自import DropDownPicker from 'react-native-dropdown-picker'; 的下拉选择器库，当在具有某些样式的视图中时，它有点无法正确展开。

这是一些代码：

<View style={styles.cellBox}>
                            <DropDownPicker
                                items={[
                                    { label: '5', value: 5 },
                                    { label: '10', value: 10 },
                                    { label: '20`', value: 20 },
                                    { label: '45`', value: 45 },
                                    { label: '57`', value: 57 },
                                ]}
                                itemStyle={{
                                    justifyContent: 'flex-start'
                                }}
                                dropDownStyle={{ backgroundColor: '#fafafa' }}
                                onChangeItem={item => buyOfferStore.setBatchQuantityInTons(item.value)}
                            />
</View>

Style 的 cellbox 属性如下所示：

 cellBox: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        borderTopWidth: 1,
        borderBottomWidth: 1,
        borderColor: theme.colors.lightSilver,
        backgroundColor: 'white',
        padding: 10,
        minHeight: 55,
        marginTop: -1,
    },

输出： enter image description here

如果我从 View 元素中删除样式效果很好。不知道为什么会这样，我无法从 View 元素中删除样式，因为我需要设置 View 元素的样式以使其具有某种外观！

Answer 1

我不认为 View 元素有问题，您看到您有一种单元格样式，并且您可能也将它用于下面的单元格，并且它们具有相同的 zIndex 级别。所以不会显示任何叠加层。你可以尝试为 DropDownPicker View 创建一个特殊的类，并给它一个额外的 zIndex 样式：2，

如：

查看样式={styles.cellBox1}>

cellBox1: { ... z索引：2， },