时间戳

首页 > 解决方案 > 无法关闭后退按钮单击时打开的可搜索下拉菜单

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

问题描述

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

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

当下拉菜单打开时，当我单击后退按钮时，下拉菜单不会关闭。在我选择任何选项之前，它只会被打开。如何解决这个问题？

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

标签： react-nativereact-native-androiddropdownsearchable-dropdown

解决方案

怎么了

该SearchableDropDown组件使用TextInput's onBlurprop 将其focus状态设置为falseon blur （代码参考）。

当focus状态为包含项目的渲染时（true代码参考）。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;

上面的实现设置为当状态为时设置itemsContainerStyle为的对象。display'none'isKeyboardVisiblefalse

用于隐藏/显示键盘的源

推荐阅读