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

Question

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

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

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

这是左选项卡视图（右选项卡视图按钮变为后退按钮）： https : //ibb.co/zP2ZBK5

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

这是我的 App.js 文件中的一个小片段。 如果没有反应导航，导出类之上的所有内容都将被注释掉。 我没有花太多时间试图弄清楚这一点，因为我已经没有太多运气尝试使用 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);

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