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

Question

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

有什么方法可以在显示键盘时隐藏 bottomTabs？

Answer 1

将以下内容添加到 android/app/src/AndroidManifest 中的 android 清单中。xml

在您的 activity 标签中 add/replace 这个属性

现在应该隐藏底部标签。

android:windowSoftInputMode="stateUnspecified|adjustPan"

Answer 2

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

  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]);

Answer 3

只需将 tabBarHideOnKeyboard: true 添加到 screenOptions

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

react-native-navigation: how to hide bottomTabs when keyboard is shown?

react-native

react-native-navigation