javascript - 如何使用 React Navigation 在 React Native 中以编程方式在 Android 上隐藏标签栏？

Question

我正在使用 Create React Native App with Expo 来构建应用程序。当按下 TextInput 时，我需要在特定 View 中隐藏底部标签栏。 Android 默认上推标签栏。

我不想触发标签栏隐藏，因为当键盘未显示时标签栏必须在 View 中。

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

我可以从导航器中隐藏标签栏，但我希望能够在具有动态导航选项/状态的特定 View 中执行此操作。如果我在屏幕组件中使用 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 为真并使用 tabBarVisible 属性隐藏 tabBar。

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 来决定何时发生。