react-native-dropdown-picker，如何修复其他组件上的下拉选择器覆盖

Question

我使用 react-native-dropdown-picker 根据按钮点击显示多个下拉菜单。下拉菜单显示为覆盖在另一个组件上，我无法选择项目。任何人都可以帮助解决这个问题？

示例代码：

import * as React from 'react';
import {View, Text, ScrollView, StyleSheet} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import {Button, Card} from 'react-native-paper';
//import Constants from 'expo-constants';

// You can import from local files
//import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
//import { Card } from 'react-native-paper';

export default function App() {
  const [myArray, setMyArray] = React.useState([]);
  const [open, setOpen] = React.useState(false);
  const [value, setValue] = React.useState(null);
  const [items, setItems] = React.useState([
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'},
    {label: 'Orange', value: 'orange'},
    {label: 'Lemon', value: 'lemon'},
  ]);

  const test = () => {
    console.log('Function called');
    setMyArray([{name: 'hello'}]);
  };

  return (
    <View style={styles.container}>
      <Button mode="contained">
        Button 1
      </Button>
      <Text>Hello world</Text>

      <Button mode="contained" >
        Button 2
      </Button>

      <Text>Hello world</Text>

      <Button mode="contained" >
        Button 3
      </Button>
      <Text>Hello world</Text>

      <Button mode="contained" onPress={() => test()} >
        ADD DropDown
      </Button>
      

      {myArray.map((item, index) => {
        
        return (
          <Card key={index} style={{height: 40}}>
            <DropDownPicker
              dropDownDirection="TOP"
              open={open}
              value={value}
              items={items}
              setOpen={setOpen}
              setValue={setValue}
              setItems={setItems}
              zIndex={3000}
              zIndexInverse={1000}
              containerStyle={{position: 'relative', width: '70%', left: '15%', paddingTop: 10}}
              childrenContainerStyle={{
                height: 1030,
              }}
              style={{
                backgroundColor: '#fafafa',
                zIndex: 10,
                position: 'relative',
              }}
              itemStyle={{justifyContent: 'flex-start'}}
              dropDownStyle={{backgroundColor: '#fafafa', height: 100}}
              dropDownContainerStyle={{
                backgroundColor: 'white',
                zIndex: 1000,
                elevation: 5000,
              }}
            />
          </Card>
        );
      })}

      <Button mode="contained">
        Button 4
      </Button>
      <Text>Hello world</Text>

      <Button mode="contained" >
        Button 5
      </Button>

      <Text>Hello world</Text>

      <Button mode="contained" >
        Button 6
      </Button>
      <Text>Hello world</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
  },
});

预期：想要显示没有覆盖的下拉菜单，并且项目应该是可选择的。

Answer 1

您可以将按钮中的其他zIndex 设置为0。

Answer 2

不要将背景色放在下拉容器样式中。据我了解，DropdownPicker 组件不能很好地与borderWidth 和backgroundColor 配合使用。

Answer 3

我花了很多时间来处理这个问题，还没有找到适用于 android 和 ios 的通用解决方案。似乎父级或下拉菜单的各种样式更改（如背景颜色、边框宽度，甚至父级视图的弯曲方向）可能会影响下拉菜单的功能。我建议您尽可能简化父级和下拉菜单的样式。这是清理样式后对我有用的方法。

对于安卓：

• 不要对父组件使用 zOrder

对于 iOS：

• 设置父级的zOrder

在你的情况下，我会选择这样的东西：

export default function App() {
     ....
     return (<Card key={index} style={Platform.OS === 'ios' ? {height: 40, zIndex: 10}: {height: 40}}>
           <DropDownPicker
               dropDownDirection="TOP"
               open={open}
               value={value}
               items={items}
               setOpen={setOpen}
               setValue={setValue}
               setItems={setItems}
               containerStyle={{width: '70%', left: '15%', paddingTop: 10}}
               childrenContainerStyle={{
                   height: 1030,
               }}
               itemStyle={{justifyContent: 'flex-start'}}
               dropDownStyle={{backgroundColor: '#fafafa', height: 100}}
          />    
      <\Card>)
}

附：不确定 Card 组件在基本视图之上添加了什么，所以如果你仍然有问题，最终你可能会选择一个简单的视图

Answer 4

刚接触到这个很酷的库，你不必手动处理 zIndex 或花时间调试：

https://github.com/hoaphantn7604/react-native-element-dropdown