反应导航底部导航在焦点输入上显示一个灰色框

Question

当我专注于输入时，我的底部导航存在问题

当我专注于该输入字段的底部导航时，将其隐藏起来，但之前是灰色框。

我想知道如何删除该框

const TabBarComponent = props => <BottomTabBar {...props} />;

  {
    initialRouteName: "showFlow",
    tabBarComponent: props => (
      <TabBarComponent {...props} style={styles.bottomNav} />
    ),
    tabBarOptions: {
      inactiveTintColor: colors.grey,
      activeTintColor: colors.background1
    }
  }

Answer 1

尝试将keyboardHidesTabBar从https://reactnavigation.org/docs/bottom-tab-navigator#tabbaroptions设置为false。

Answer 2

最后，我确实找到了解决该问题的方法：

import { Keyboard } from "react-native";
const TabBarComponent = props => {
    const [show, setShow] = useState(false);

    useEffect(() => {
      let keyboardDidShowListener = Keyboard.addListener(
        "keyboardDidShow",
        _keyboardDidShow
      );

      let keyboardDidHideListener = Keyboard.addListener(
        "keyboardDidHide",
        _keyboardDidHide
      );

      return () => {
        keyboardDidShowListener.remove();
        keyboardDidHideListener.remove();
      };
    }, []);

  const _keyboardDidHide = () => setShow(false);
  const _keyboardDidShow = () => setShow(true);

  return (
    <BottomTabBar
      {...props}
      style={{ height: show ? 0 : 80, backgroundColor: colors.background1 }}
    />
  );
};