react-native-dropdown-picker 列出的项目未正确显示（覆盖）

Question

我使用“react-native-dropdown-picker”包创建了 DropDown 选择器，列出了所有项目，但它在另一个组件上看起来是透明的。谁能帮我解决这个问题？

这里是我的源代码：

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;

预计：列出的项目需要在没有覆盖的情况下正确显示，按钮希望在带有滚动视图的下拉列表之后出现。

Answer 1

问题似乎不仅仅在于透明度。如果您注意到，凸起的按钮出现在下拉列表的线条上方。

这意味着 z-index 也是一个问题。

将 dropDownContainerStyle={{ backgroundColor: 'white',zIndex: 1000, elevation: 1000 }} 添加到您的 DropDownPicker 组件。

这应该修复 transparency 以及 zIndex。

Answer 2

对我来说，接受的答案在 ios 中不起作用。要解决 ios 问题，我必须设置父视图的 zIndex，但这会导致 android 出现问题。您的代码应如下所示。

<View style={Platform.OS === 'ios' ? {zIndex: 100} : {}}>
     <DropDownPicker {...dropDownProps} />
</View>

我建议使用以上内容作为起点，确保在这个普通版本中一切正常，然后开始向样式中添加更多内容

react-native-dropdown-picker 列出的项目未正确显示（覆盖）

react-native-dropdown-picker listed items not showing properly (Overlay)

javascript

reactjs

react-native

react-native-dropdown-picker