react-navigation：如何使BottomTab的按钮不显示？答案

【问题标题】：react-navigation: How to make a button of BottomTab not display?react-navigation：如何使BottomTab的按钮不显示？
【发布时间】：2019-11-25 05:28:38
【问题描述】：

代码

import React from 'react';
import { Text, View, Button } from 'react-native';
import { createAppContainer, NavigationActions } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs'

class Page2 extends React.Component {
  openPage3 () {
    this.props.navigation.dispatch(NavigationActions.navigate({
      routeName: 'Page3',
      params: {},
    }));
  }

  render () {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button title="Page2" onPress={() => { this.openPage3() }} />
      </View>
    );
  }
}


class Page3 extends React.Component {
  render () {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button title="Page3" />
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  // ...
  Page2: { screen: Page2 },
  Page3: { screen: Page3 }, // I hope he doesn't show up on the tab, but at the same time he can call up this page.
});

export default createAppContainer(TabNavigator);

如上所述，我希望page3不会出现在标签上，但同时他可以调出这个页面。

如何更改代码？

文档：https://reactnavigation.org/docs/en/next/bottom-tab-navigator.html

【问题讨论】：

标签： react-native react-native-android

【解决方案1】：

从您的createBottomTabNavigator 中删除 Page3。假设您想从第 1 页调用 Page3。您可以这样做。

    const PageNav = createStackNavigator({
      Page1: { screen: Page1 },
      Page3: { screen: Page3 }
    });
    const TabNavigator = createBottomTabNavigator({
      Page1: PageNav,
      Page2: { screen: Page2 }
    });

在您的 page1 类中，您只需执行此操作即可导航到 page3

class Page1 extends Component {
    Navigate = () => {
    this.props.navigation.navigate('Page3');
    }
     render() {
    return(
    <View>
      <TouchableOpacity onPress={this.Navigate} />
    </View>}
    );
}

【讨论】：