Javascript 如何在Android上通过React-Native with React-Navigation以编程方式隐藏选项卡栏？

我正在使用Create React Native App with Expo构建一个应用程序。当按下TextInput时，我需要在特定视图中隐藏底部选项卡栏。默认情况下，Android向上推tabbar

我不想触发tabbar隐藏，因为当键盘未显示时，tabbar必须在视图中

"expo": "^31.0.2",
"react": "16.5.0",
"react-navigation": "^2.18.2"

我将各种堆栈导出为CreateBoottomTabNavigator

const SearchStack = createStackNavigator({
  Search: SearchScreen,
  Details: DetailsScreen,
  Tag: TagScreen,
  Category: CategoryScreen,
});

SearchStack.navigationOptions = {
  tabBarLabel: 'Søg',
  tabBarOptions: {
    activeTintColor: Colors.themeColor,
    showLabel: true,
  },
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-search' : 'md-search'}
    />
  ),
};

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  InformationStack,
  SearchStack,
});

---

当Android上有键盘或点击按钮时，您对如何隐藏选项卡栏有何想法？

在要隐藏选项卡栏的屏幕中，更新导航选项。该键使用

tabBarVisible

属性启用

animationEnabled

为true并隐藏

tabBar

static navigationOptions = ({navigation}) => ({
  tabBarVisible: (navigation.state.params && navigation.state.params.hideTabBar) === true,
  animationEnabled: true
)}

使选项卡栏在

组件willmount

中可见：

componentWillMount() {
    const setParamsAction = NavigationActions.setParams({
      params: {hideTabBar: true}
    });
    this.props.navigation.dispatch(setParamsAction);
}

在

组件将卸载
中再次隐藏选项卡栏：

componentWillUnmount() {
    const setParamsAction = NavigationActions.setParams({
      params: {hideTabBar: false}
    });
    this.props.navigation.dispatch(setParamsAction);
}

您可以检查屏幕上的
this.state
或
this.props
，以决定何时执行此操作。
创建一个单独的tabBarComponent，它将侦听和响应特定事件。在我的例子中，键盘显示的事件如下：

    import React from 'react';
    import {TabBarBottom} from react-navigation;
    import {Keyboard, Platform} from 'react-native';


    Class TabBarComponent extends React.Component {
      constructor() {
         super();
         this.state = {
             visible: true
          }
       }

     componentDidMount() {
        if (Platform.OS === 'ios') {
          this.keyboardEventListeners = [
            Keyboard.addListener('keyboardDidShow', this.visible(false)),
            Keyboard.addListener('keyboardDidHide', this.visible(true))
          ];
        }
      }
      componentWillUnmount() {
        this.keyboardEventListeners.forEach((eventListener) => eventListener.remove());
      }
      visible = visible => () => this.setState({visible});
      render() {
        if (!this.state.visible) return null
        else {return <TabBarBottom {...props}/>}
       }
    }

从“React”导入React；
从react导航导入{TabBarBottom}；
从“react native”导入{键盘，平台}；
类TabBarComponent扩展了React.Component{
构造函数（）{
超级（）；
此.state={
可见：正确
}
}
componentDidMount（）{
如果（Platform.OS==='ios'）{
this.keyboardEventListeners=[
Keyboard.addListener（'keyboardDidShow'，this.visible（false）），
Keyboard.addListener（'keyboardDidHide'，this.visible（true））
];
}
}
组件将卸载（）{
this.keyboardEventListeners.forEach（（eventListener）=>eventListener.remove（））；
}
visible=visible=>（）=>this.setState（{visible}）；
render（）{
如果（！this.state.visible）返回null
else{return}
}
}

然后，在应用程序导航器的tabBarComponent导航选项中添加此组件

 tabBarComponent: props => <TabBarComponent />,
 tabBarPosition: 'bottom'

tabBarComponent:props=>，
tabbar位置：“底部”
有时将android:WindowsofInputMode设置为
adjustPan
或
adjustResize
并不理想，因为它会影响整个应用程序

这就是我解决这个错误的想法

反应导航5
BottomTabBar.js

import React, { useEffect, useState } from 'react';
import { Platform, Keyboard } from 'react-native';
import { BottomTabBar } from '@react-navigation/bottom-tabs';

const CustomBottomTabBar = props => {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    let keyboardEventListeners;
    if (Platform.OS === 'android') {
      keyboardEventListeners = [
        Keyboard.addListener('keyboardDidShow', () => setVisible(false)),
        Keyboard.addListener('keyboardDidHide', () => setVisible(true)),
      ];
    }
    return () => {
      if (Platform.OS === 'android') {
        keyboardEventListeners &&
          keyboardEventListeners.forEach(eventListener => eventListener.remove());
      }
    };
  }, []);

  const render = () => {
    if (Platform.OS === 'ios') {
      return <BottomTabBar {...props} />;
    }
    if (!visible) return null;
    return <BottomTabBar {...props} />;
  };

  return render();
};

export default CustomBottomTabBar;


import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const bottomTabNavigator = createBottomTabNavigator();

<BottomNavigator
    screenOptions={bottomTabScreenOptions}
    tabBarOptions={bottomTabBarOptions}
    tabBar={props => <CustomBottomTabBar {...props} />}
>
    ......
</BottomNavigator>

import React，{useffect，useState}来自“React”；
从“react native”导入{Platform，Keyboard}；
从“@react navigation/bottom tabs”导入{BottomTabBar}；
const CustomBottomTabBar=props=>{
const[visible，setVisible]=useState（true）；
useffect（（）=>{
让键盘事件成为听众；
如果（Platform.OS==='android'）{
keyboardEventListeners=[
Keyboard.addListener（'keyboardDidShow'，（）=>setVisible（false）），
Keyboard.addListener（'keyboardDidHide'，（）=>setVisible（true）），
];
}
return（）=>{
如果（Platform.OS==='android'）{
键盘事件监听器&&
forEach（eventListener=>eventListener.remove（））；
}
};
}, []);
常量渲染=（）=>{
如果（Platform.OS==='ios'）{
返回；
}
如果（！visible）返回null；
返回；
};
返回render（）；
};
导出默认CustomBottomTabBar；

AppNavigator.js

import React, { useEffect, useState } from 'react';
import { Platform, Keyboard } from 'react-native';
import { BottomTabBar } from '@react-navigation/bottom-tabs';

const CustomBottomTabBar = props => {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    let keyboardEventListeners;
    if (Platform.OS === 'android') {
      keyboardEventListeners = [
        Keyboard.addListener('keyboardDidShow', () => setVisible(false)),
        Keyboard.addListener('keyboardDidHide', () => setVisible(true)),
      ];
    }
    return () => {
      if (Platform.OS === 'android') {
        keyboardEventListeners &&
          keyboardEventListeners.forEach(eventListener => eventListener.remove());
      }
    };
  }, []);

  const render = () => {
    if (Platform.OS === 'ios') {
      return <BottomTabBar {...props} />;
    }
    if (!visible) return null;
    return <BottomTabBar {...props} />;
  };

  return render();
};

export default CustomBottomTabBar;


import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const bottomTabNavigator = createBottomTabNavigator();

<BottomNavigator
    screenOptions={bottomTabScreenOptions}
    tabBarOptions={bottomTabBarOptions}
    tabBar={props => <CustomBottomTabBar {...props} />}
>
    ......
</BottomNavigator>

从'@react navigation/bottom tabs'导入{createBottomTabNavigator}；
const bottomTabNavigator=createBottomTabNavigator（）；
}
>
......
替换项目中android\app\src\main\AndroidManifest.xml中的一行代码。这将在您打开键盘时隐藏选项卡栏。

  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        
     **Just change your windowSoftInputMode value to "adjustPan"**

    android:windowSoftInputMode="adjustPan"> 

    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
`


`