react-native-navigation：显示键盘时如何隐藏底部选项卡？

Question

我正在使用从react-native-navigaton到应用程序内导航的bottomTabs导航器。然而，每当我有一个

TextInput

字段时，底部选项卡就会被向上推。

每当显示键盘时隐藏底部选项卡的可能方法是什么？

Answer 1

只需将

tabBarHideOnKeyboard: true

添加到

screenOptions

Answer 2

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

在您的活动标签中添加/替换此属性

底部选项卡现在应该隐藏了。

android:windowSoftInputMode="stateUnspecified|adjustPan"

Answer 3

当键盘打开时，您可以使用 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 4

带或不带自定义 tabBar 的 React Navigation V6 的答案

我正在使用反应导航V6，因为我使用的是自定义tabBar，

tabBarHideOnKeyboard: true

道具不起作用，但是当我将自定义tabBar更改为默认选项卡栏时，该道具可以工作，但我不喜欢该道具在android上的行为，所以我使用react-native中的键盘来检查键盘是否处于活动状态，并将css显示属性设置为“none”

  import { Keyboard, View } from "react-native";

  const [keyboardStatus, setKeyboardStatus] = useState<boolean>();

  useEffect(() => {
    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
      setKeyboardStatus(true);
    });
    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardStatus(false);
    });

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);

所以现在我们可以在自定义选项卡栏组件上这样做。

    <View style={
      [
        styles.mainContainer,
        keyboardStatus ? styles.hideTabNavigation : null,
      ]
    }
    >
    // your code here
   </View>

希望这会对某人有所帮助，直到他们解决这个问题！

Answer 5

对于自定义选项卡栏，请使用下面带有一些动画的代码

import { Keyboard } from 'react-native';
import Animated, {
    Easing,
    useAnimatedStyle,
    useSharedValue,
    withTiming,
} from 'react-native-reanimated';
import { initialWindowMetrics } from 'react-native-safe-area-context';

const { insets } = initialWindowMetrics || {};
const defaultHeight = 48 + (insets?.bottom ?? 0);
const CustomTabBar = () => {
    const isVisible = useSharedValue(0);

    useEffect(() => {
        const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
            isVisible.value = withTiming(0, {
                duration: 500,
                easing: Easing.inOut(Easing.ease),
            });
        });
        const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
            isVisible.value = withTiming(defaultHeight, {
                duration: 500,
                easing: Easing.inOut(Easing.ease),
            });
        });

        return () => {
            showSubscription.remove();
            hideSubscription.remove();
        };
    }, []);

    const keyboardStyles = useAnimatedStyle(() => ({
        height: isVisible.value,
    }));

    return <Animated.View style={keyboardStyles}></Animated.View>;
};