单击后退按钮时无法关闭打开的可搜索下拉菜单

Question

我正在使用以下模块使用可搜索下拉菜单。

https://www.npmjs.com/package/react-native-searchable-dropdown

当下拉菜单打开时，当我点击后退按钮时，下拉菜单没有关闭。在我 select 任何选项之前，它只会被打开。如何解决？

<View style={{ marginTop: 5 }}>
    <SearchableDropdown
        onItemSelect={(item, index) => {
            setItemname(item.value);
            setItemIndex(index);
        }}
        itemStyle={{
            padding: 10,
            marginTop: 2,
            backgroundColor: '#ddd',
            borderColor: '#bbb',
            borderWidth: 1,
            borderRadius: 5,
        }}
        itemTextStyle={{ color: '#222' }}
        itemsContainerStyle={{ maxHeight: 140 }}
        items={items}
        defaultIndex={itemindex}
        resetValue={false}
        textInputProps={
            {
                placeholder: "Select Item",
                underlineColorAndroid: "transparent",
                style: {
                    padding: 12,
                    borderWidth: 1,
                    borderColor: '#ccc',
                    borderRadius: 5,
                },
            }
        }
        listProps={{
            nestedScrollEnabled: true,
        }}
    />
</View>

Answer 1

发生了什么

SearchableDropDown 组件使用 TextInput 的 onBlur 属性在模糊时将其 focus 状态设置为 false (code reference) .

当 focus 状态为 true 时，呈现包含项目 (code reference) 的 FlatList。

问题是当你按下后退按钮时 onBlur 没有被触发，这意味着 focus 状态没有设置为 false 而 FlatList 与项目仍在呈现。

可能的解决方法

您可以根据是否隐藏键盘有条件地隐藏平面列表。

import React, { Component, useState, useEffect, useRef } from "react";
import { View, TextInput, Keyboard } from "react-native";
import SearchableDropdown from "react-native-searchable-dropdown";

const App = () => {
  const [itemname, setItemname] = useState("");
  const [itemindex, setItemIndex] = useState(0);
  const [isKeyboardVisible, setKeyboardVisible] = useState(false);

  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      "keyboardDidShow",
      () => {
        setKeyboardVisible(true);
      }
    );
    const keyboardDidHideListener = Keyboard.addListener(
      "keyboardDidHide",
      () => {
        setKeyboardVisible(false);
      }
    );

    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);

  return (
    <View style={{ marginTop: 5 }}>
      <SearchableDropdown
        onItemSelect={(item, index) => {
          setItemname(item.value);
          setItemIndex(index);
        }}
        itemStyle={{
          padding: 10,
          marginTop: 2,
          backgroundColor: "#ddd",
          borderColor: "#bbb",
          borderWidth: 1,
          borderRadius: 5,
        }}
        itemTextStyle={{ color: "#222" }}
        itemsContainerStyle={
          isKeyboardVisible ? { maxHeight: 140 } : { display: "none" }
        }
        items={items}
        defaultIndex={itemindex}
        resetValue={false}
        textInputProps={{
          placeholder: "Select Item",
          underlineColorAndroid: "transparent",
          style: {
            padding: 12,
            borderWidth: 1,
            borderColor: "#ccc",
            borderRadius: 5,
          },
        }}
        listProps={{
          nestedScrollEnabled: true,
        }}
      />
    </View>
  );
};

export default App;

当 isKeyboardVisible 状态为 false 时，上面的实现将 itemsContainerStyle 设置为 display 设置为 'none' 的对象。

单击后退按钮时无法关闭打开的可搜索下拉菜单

Unable to close the opened searchable dropdown on back button click

react-native

dropdown

react-native-android

searchable-dropdown

发生了什么

可能的解决方法