react-native - react-native-navigation：显示键盘时如何隐藏bottomTabs？

Question

我正在使用 react-native-navigaton 中的 bottomTabs 导航器在我的应用程序中导航。但是，每次我有一个TextInput字段时，bottomTabs 都会被向上推。

每当显示键盘时，隐藏bottomTabs的可能方法是什么？

标签： react-nativereact-native-navigation

Answer 1

您可以使用 React 挂钩以编程方式在键盘打开时隐藏底部选项卡

  const _keyboardDidShow = useCallback(() => {
    navigation.setOptions({
      tabBarVisible: false,
    });
  }, [navigation]);

  const _keyboardDidHide = useCallback(() => {
    navigation.setOptions({
      tabBarVisible: true,
    });
  }, [navigation]);

  useEffect(() => {
    Keyboard.addListener('keyboardDidShow', _keyboardDidShow);
    Keyboard.addListener('keyboardDidHide', _keyboardDidHide);

    // cleanup function
    return () => {
      Keyboard.removeListener('keyboardDidShow', _keyboardDidShow);
      Keyboard.removeListener('keyboardDidHide', _keyboardDidHide);
    };
  }, [_keyboardDidHide, _keyboardDidShow]);