Question

我正在使用带有Expo的Create React Native App来构建应用程序。按下TextInput时，我需要在特定视图中隐藏底部的标签栏。 Android默认情况下会向上推选项卡。

我不会触发标签栏隐藏，因为当不显示键盘时，标签栏必须在视图中。

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

我将各种堆栈导出为createBottomTabNavigator。

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

我可以从导航器中隐藏选项卡，但是我希望能够在特定视图中使用动态navigationOptions /状态来执行此操作。如果我在屏幕组件中使用tabBarVisible：false，则它将不起作用。

export default class SearchScreen extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      text: '',
      showClearTextIcon: false,
    };
  }

  static navigationOptions = {
    header: null,
    title: 'Search',
  };

  /**
  * Lifecycle function.
  */
  componentDidMount() {
    this.load()
    this.props.navigation.addListener('willFocus', this.load)
  }

您是否对在Android上存在键盘或单击按钮时如何隐藏选项卡有任何想法？

Answer 1

在要隐藏标签栏的屏幕中，更新导航选项。关键是使animationEnabled为true，并使用tabBar属性隐藏tabBarVisible。

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

使tabBar在componentWillMount中可见：

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

然后在componentWillUnmount中再次隐藏tabBar：

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

您可以检查屏幕上的this.state或this.props，以决定何时发生这种情况。

Answer 2

创建一个单独的tabBarComponent，它将侦听并响应某些事件。就我而言，它是键盘显示的事件，如下所示：

import {TabBarBottom} from react-navigation;

Class TabBarComponent extens React.Component {

 componentDidMount() {
    if (!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}/>}
   }
}

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

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

Answer 3

有时将{ "day": [1,2,3], "Month": [1], "year": [15,20,25] }设置为android:windowSoftInputMode或adjustPan并不是一个理想的主意，因为它会影响整个应用程序。

这就是我解决该错误的主意。

反应导航5

BottomTabBar.js

adjustResize

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;

Answer 4

替换项目内 android\app\src\main\AndroidManifest.xml 中的一行代码。这将在您打开键盘时隐藏 TabBar。

  <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" />
`

如何在带有React Navigation的React Native中以编程方式在Android上隐藏标签栏？

4 个答案:

反应导航5