gpt4 book ai didi

javascript - react-native-dropdown-picker 列出的项目未正确显示(叠加)

转载 作者:行者123 更新时间:2023-12-04 16:37:38 24 4
gpt4 key购买 nike

我已经使用“react-native-dropdown-picker”包创建了下拉选择器,所有项目都被列出,但它在另一个组件上看起来是透明的。谁能帮我解决这个问题?
enter image description here
这是我的源代码:

import React, {useState} from 'react';
import {View, Text, Button, ScrollView, StyleSheet} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';


const App = () => {
const [myArray, setMyArray] = useState([]);
const [open, setOpen] = useState(false);
const [value, setValue] = useState(null);
const [items, setItems] = useState([
{label: 'Apple', value: 'apple'},
{label: 'Banana', value: 'banana'}
]);

return (
<View style={styles.container}>
<Button title="Check"/>
<Text>Hello world</Text>
<DropDownPicker
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
/>
<Button title="Check"/>
<Text>Hello world</Text>
<Button title="Check"/>
<Text>Hello world</Text>
<Button title="Check"/>
<Text>Hello world</Text>
<Button title="Check"/>
<Text>Hello world</Text>
<Button title="Check"/>
<Text>Hello world</Text>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
},
});
export default App;
预期的:
列出的项目需要在没有覆盖的情况下正确显示,按钮要出现在带有 ScrollView 的下拉列表之后。

最佳答案

问题似乎不仅仅在于透明度。如果您注意到,凸起的按钮会出现在下拉菜单的行上方。
这意味着 z-index这里也是一个问题。
添加 dropDownContainerStyle={{ backgroundColor: 'white',zIndex: 1000, elevation: 1000 }}给您的 DropDownPicker成分。
这应该修复 transparency以及 zIndex .

关于javascript - react-native-dropdown-picker 列出的项目未正确显示(叠加),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67558933/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com