如何使用后退按钮而不是选项卡来实现反应导航堆栈/bottomTab 导航器进行导航？答案

【问题标题】：How to implement react-navigation stack/bottomTab navigator using back buttons instead of tabs to navigate?如何使用后退按钮而不是选项卡来实现反应导航堆栈/bottomTab 导航器进行导航？
【发布时间】：2020-01-31 01:53:53
【问题描述】：

我已经实现了一个当前不使用任何类型导航的 react native 应用程序。我想实现反应导航，但正在努力重新创建我已经拥有的东西。下面我在下面添加了一些图片，以举例说明我目前没有反应导航的情况。我想完全使用 react-navigation 来复制它。

这是主屏幕：https://ibb.co/XWxCpwt

这是右标签视图（左标签视图按钮变为后退按钮）：https://ibb.co/XzFB8v8

这是左侧标签视图（右侧标签视图按钮变为后退按钮）：https://ibb.co/zP2ZBK5

我想明确一点，中心底部按钮与显示中心视图无关。它具有完全不同的功能。这就是我希望后退按钮以这种方式工作的原因。

这是我的 App.js 文件中的一个小 sn-p。如果没有 react-navigation，导出类上方的所有内容都将被注释掉。我没有花太多时间试图弄清楚这一点，因为我已经没有太多运气尝试使用 react-native-navigation 来实现。任何帮助将不胜感激！

const TabNavigator = createBottomTabNavigator({
  Community: Community,
  Root: Root,
  Network: Network
});

const RootStack = createStackNavigator({
    Root: Root
});

const Navigation = createAppContainer(TabNavigator);

// Everything above this line would normally be commented out and <Root /> would
// be inside the exported class instead of <Navigation />

export default class App extends Component {
  render() {

    return (
        <Provider store={persistStore.store} >
            <PersistGate loading={null} persistor={persistStore.persistor}>
                <Navigation />
            </PersistGate>
        </Provider>
    );
  }
}

我已经更新了我的 App.js。这是迄今为止我能得到的最接近的。下一步需要将选项卡配置为在单击时不显示当前链接到选项卡的视图，而是更改为返回按钮以将用户返回到主屏幕（根组件）。这个应用程序所需的导航外观是感觉就像三个视图并排放置。用户一次只能浏览一个视图，不能在其间跳转。

const TabNavigator = createBottomTabNavigator({
    Community: Community,
    Home: Root,
    Network: Network
});

const RootStack = createStackNavigator({
    Root: {
        screen: TabNavigator,
        navigationOptions: {
            headerLeft: () => <ProfileSidebarButton />,
            headerTitle: () => <Search />,
            headerRight: () => <MapFilterButton />
        }
    }
});


const Navigation = createAppContainer(RootStack);

【问题讨论】：

标签： reactjs react-native react-navigation react-navigation-stack react-navigation-bottom-tab

【解决方案1】：

我能够使用此解决方案解决我的配置问题。关键是使用 tabBarComponent 来呈现我的自定义标签栏。然后我将导航道具传递给按钮。然后我使用 this.props.nav.navigate('Community') 实现了我自己的导航逻辑（在我的例子中，我将导航道具传递为 'nav'）。这似乎在 atm 上运行良好，每次导航到 Rootstack 渲染时都会略微向上和向下滑动，存在一个小问题。

const HomeStack = createDrawerNavigator({
    Root: Root,
    Profile: Profile
},{
    initialRouteName: 'Root',
    drawerWidth: SCREEN_WIDTH,
    contentComponent: props => (
        <ProfileSidebar drawerNavigator={props.navigation}/>
    )
});

const TabNavigator = createBottomTabNavigator({
    Community: {
        screen: Community
    },
    Home: HomeStack,
    Network: {
        screen: Network
    }
},{
    initialRouteName: 'Home',
    tabBarComponent: props => (
        <View style={styles.nocturnFooter}>
            <NavButton nav={props.navigation}/>
            <NocturnButton />
            <CommunityButton nav={props.navigation}/>
        </View>
    ),
});

const RootStack = createStackNavigator({
    Root: {
        screen: TabNavigator,
        navigationOptions: ({ navigation }) => ({
            headerLeft: () => <ProfileSidebarButton />,
            headerTitle: () => <Search />,
            headerRight: () => <MapFilterButton />,
            headerTransparent: navigation.state.index == 1 ? true : false,
            headerStyle: navigation.state.index != 1 ? {
                backgroundColor: '#000000'
            } : {}
        })
    }

});


const Navigation = createAppContainer(RootStack);

【讨论】：