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

Question

代码

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

Answer 1

从您的createBottomTabNavigator中删除Page3。假设您要从第1页调用第3页。您可以执行以下操作。

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