Блог

Я новичок в react native.

Мой вопрос довольно прост: Я использую средство выбора раскрывающегося списка package react-native, но когда я открываю раскрывающийся список, я не могу щелкнуть по опции, это щелчок по аватару под опцией. Пример Я хочу нажать «Жилье», и это будет модальный аватар от Yvonee, а не фильтровать категорию. Есть какие-нибудь предложения, как их решить? Вот мой код:

 <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}>
 

Вот изображение проблемы:

Проблема

Вы пытаетесь обновить showDropDown переменную с setShowDropDown помощью неверного способа. поскольку setState метод является асинхронным действием, вы столкнулись с этой проблемой.

Решение

используйте prevState в обратном вызове в setState методе для showDropDown правильного обновления:

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