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不要出现在tab上，但同时他可以调出这个页面

如何修改密码？

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

Answer 1

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

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

在您的第 1 页 class 中，您只需执行此操作即可导航到第 3 页

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

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

react-navigation: How to make a button of BottomTab not display?

react-native

react-native-android

代码