React Native Dropdown Picker不要点击选项答案

【问题标题】：React Native Dropdown Picker don't click optionReact Native Dropdown Picker不要点击选项
【发布时间】：2021-12-05 11:34:30
【问题描述】：

我是 react native 的新手。

我的问题很简单：我使用包 react-native-dropdown 选择器，但是当我打开下拉菜单时，我无法单击该选项，而是单击该选项下的头像。示例我想单击 Housing 并且它从 Yvonee 打开 Avatar 模式，而不是过滤类别。任何建议如何解决？这是我的代码：

<View style={[styles.filterCompany, Platform.OS !== 'android' ? { zIndex: 1 } : null]}>
                    <DropDownPicker
                        items={colleguesList}
                        open={showDropDown}
                        setOpen={() => setShowDropDown(!showDropDown)}
                        value={category}
                        setValue={value => setCategory(value)}
                        dropDownContainerStyle={{
                            width: 170,
                            alignSelf: 'center',
                            position: 'absolute',
                            top: 10,
                            borderColor: Colors.SBLighBlue,
                            backgroundColor: Colors.SBLighBlue
                        }}
                        textStyle={{
                            fontFamily: customFonts.medium,
                            color: Colors.SBWhite,
                            fontSize: 16,
                            justifyContent: 'center'
                        }}
                        labelStyle={{
                            fontWeight: 'bold',
                            color: Colors.SBWhite
                        }}
                        arrowIconStyle={{
                            tintColor: Colors.SBWhite
                        }}
                        tickIconStyle={{
                            tintColor: Colors.SBWhite
                        }}
                        listMode="SCROLLVIEW"
                        style={{
                            width: 170,
                            height: 40,
                            alignSelf: 'center',
                            marginTop: 10,
                            backgroundColor: Colors.SBLighBlue,
                            borderColor: Colors.SBLighBlue,
                            zIndex: 1
                        }}
                    />
                </View>
                    <View style={styles.listAvatar}>

这是问题的图像：

【问题讨论】：

标签： reactjs typescript react-native react-redux

【解决方案1】：

问题

您试图以错误的方式使用setShowDropDown 更新showDropDown 变量。由于setState 方法是一个异步操作，所以您会遇到这个问题。

解决方案

在setState 方法的回调中使用prevState 以正确更新showDropDown：

<DropDownPicker
  setOpen={() => setShowDropDown((prevState) => !prevState)}
  // ...
/>

【讨论】：