时间戳

首页 > 解决方案 > React Native Dropdown Picker不要点击选项

reactjs - React Native Dropdown Picker不要点击选项

问题描述

我是反应原生的新手。

我的问题很简单：我使用包 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}>

这是问题的图像： 在此处输入图像描述

标签： reactjstypescriptreact-nativereact-redux

解决方案

问题

您正在尝试以错误的方式更新showDropDown变量。setShowDropDown由于该setState方法是异步操作，因此您将面临此问题。

解决方案

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

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

推荐阅读