реагировать навигация внизу навигация показывает серое поле на фокусе ввода

Question

У меня проблема с нижней навигацией, когда я фокусируюсь на входе

Когда я фокусируюсь на этом поле ввода, нижняя навигация будет скрыта, но это перед ним серый ящик.

Я хочу знать, как я могу удалить этот ящик

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

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

Answer 1

наконец я нашел способ решить эту проблему:

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 }}
    />
  );
};

Answer 2

Попробуйте установить keyboardHidesTabBar от https://reactnavigation.org/docs/bottom-tab-navigator#tabbaroptions до false.