如何避免触发 onPress 事件（Pressable）时隐藏键盘？

Question

我的 React Native 应用程序有一个搜索屏幕（页面 A），隐藏键盘时会返回上一页；点击搜索结果将进入搜索结果页面（页面B）。问题在于，单击搜索结果会隐藏键盘，从而激活 KeyboardDidHide 事件。 KeyboardDidHide事件会导致返回上一页，导致跳转到B页永远不会被执行。

有没有办法防止当我按下另一个可按组件时隐藏键盘，以便 KeyboardDidHide 事件不会触发

以下是代码：

const Search: FC = () => {
  // state, refs
  const navigation = useNavigation();
  const [inputText, setInputText] = useState('');
  const _inputText = useDeferredValue(inputText);
  const [searchResult] = useSearchItem(_inputText);
  // KeyboardHide Detector
  useEffect(() => {
    const keyboardHideSubscription = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        navigation.goBack();
      },
    );
    return () => {
      keyboardHideSubscription.remove();
    };
  }, []);
  return (
    <View>
      <View>
        <View>
          <ScrollView showsVerticalScrollIndicator={false}>
            {searchResult.map(result => (
              <Fragment key={result.id}>
                <List.ItemContent
                  onPress={e => {
                    navigation.navigate('Detail', {
                      itemDetail: result,
                    });
                  }}>
                  <Text>{result.name}</Text>
                </List.ItemContent>
              </Fragment>
            ))}
          </ScrollView>
        </View>
      </View>
      <KeyboardAvoidingView behavior="padding">
        <Shadow>
          <View>
            <SearchInput autoFocus value={inputText} onChange={setInputText} />
          </View>
        </Shadow>
      </KeyboardAvoidingView>
    </View>
  );
};

Answer 1

在需要时使用

Keyboard.dismiss()

显式关闭键盘。

import { Keyboard } from 'react-native';

const Search: FC = () => {
  // state, refs
  const navigation = useNavigation();
  const [inputText, setInputText] = useState('');
  const _inputText = useDeferredValue(inputText);
  const [searchResult] = useSearchItem(_inputText);

  const handleSearchResultPress = (result) => {
    Keyboard.dismiss(); // Dismiss the keyboard explicitly
    navigation.navigate('Detail', {
      gatheringItem: result,
    });
  };

  // KeyboardHide Detector
  useEffect(() => {
    const keyboardHideSubscription = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        navigation.goBack();
      },
    );
    return () => {
      keyboardHideSubscription.remove();
    };
  }, []);

  return (
    <View>
      <View>
        <ScrollView showsVerticalScrollIndicator={false}>
          {searchResult.map(result => (
            <Fragment key={result.id}>
              <List.ItemContent
                icon={
                  <Icon
                    as={ExternalLinkIcon}
                    w={px2DpX(16)}
                    h={px2DpX(16)}
                  />
                }
                onPress={() => handleSearchResultPress(result)}>
                <Text>{result.name}</Text>
              </List.ItemContent>
              <View key={`divider-${result.id}`} />
            </Fragment>
          ))}
        </ScrollView>
      </View>
      <KeyboardAvoidingView behavior="padding">
        <Shadow
          style={styles.panelWrapper}
          startColor={colorMode === 'light' ? '#00000020' : '#00000000'}>
          <View>
            <SearchInput autoFocus value={inputText} onChange={setInputText} />
          </View>
        </Shadow>
      </KeyboardAvoidingView>
    </View>
  );
}