Reactjs 如何使用后退按钮而不是选项卡来实现react导航堆栈/底部选项卡导航器？

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

这是主屏幕：

这是右选项卡视图（左选项卡视图按钮变为后退按钮）：

这是左侧选项卡视图（右侧选项卡视图按钮变为后退按钮）：

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

这是我的App.js文件中的一个小片段。如果没有react导航，导出类上方的所有内容都将被注释掉。我没有花太多的时间来尝试解决这个问题，因为我已经没有太多的运气尝试使用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>
    );
  }
}

const TabNavigator=createBottomTabNavigator({
社区:社区,，
根：根，
网络：网络
});
const RootStack=createStackNavigator({
根：根
});
常量导航=createAppContainer（TabNavigator）；
//这条线以上的所有内容通常都会被注释掉，并且
//位于导出类中，而不是
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}

我已经更新了我的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);

const TabNavigator=createBottomTabNavigator({
社区:社区,，
家：根，
网络：网络
});
const RootStack=createStackNavigator({
根目录：{
屏幕：TabNavigator，
导航选项：{
headerLeft:（）=>,，
标题：（）=>，
头灯：（）=>
}
}
});
const Navigation=createAppContainer（RootStack）；

使用此解决方案，我能够解决配置问题。关键是使用tabBarComponent呈现我的自定义选项卡栏。然后我将导航道具传递给按钮。然后，我使用这个.props.nav.navigate（'Community'）实现了我自己的导航逻辑（在我的例子中，我将导航道具作为'nav'传递）。这似乎工作得很好，但在每次导航到根堆栈时，根堆栈呈现稍微向上和向下滑动有一个小问题

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

const HomeStack=createDrawerNavigator({
根：根，
简介：简介
},{
initialRouteName:'根'，
抽屉宽度：屏幕宽度，
contentComponent:props=>(
)
});
const TabNavigator=createBottomTabNavigator({
社区：{
屏幕：社区
},
家：家装，
网络：{
屏幕：网络
}
},{
initialRouteName:“主页”，
tabBarComponent:props=>(
),
});
const RootStack=createStackNavigator({
根目录：{
屏幕：TabNavigator，
导航选项：（{navigation}）=>({
headerLeft:（）=>,，
标题：（）=>，
headerRight:（）=>，右，
headerTransparent:navigation.state.index==1？true:false，
headerStyle:navigation.state.index！=1{
背景颜色：'#000000'
} : {}
})
}
});
const Navigation=createAppContainer（RootStack）；

使用此解决方案，我能够解决配置问题。关键是使用tabBarComponent呈现我的自定义选项卡栏。然后我将导航道具传递给按钮。然后，我使用这个.props.nav.navigate（'Community'）实现了我自己的导航逻辑（在我的例子中，我将导航道具作为'nav'传递）。这似乎工作得很好，但在每次导航到根堆栈时，根堆栈呈现稍微向上和向下滑动有一个小问题

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

const HomeStack=createDrawerNavigator({
根：根，
简介：简介
},{
initialRouteName:'根'，
抽屉宽度：屏幕宽度，
contentComponent:props=>(
)
});
const TabNavigator=createBottomTabNavigator({
社区：{
屏幕：社区
},
家：家装，
网络：{
屏幕：网络
}
},{
initialRouteName:“主页”，
tabBarComponent:props=>(
),
});
const RootStack=createStackNavigator({
根目录：{
屏幕：TabNavigator，
导航选项：（{navigation}）=>({
headerLeft:（）=>,，
标题：（）=>，
headerRight:（）=>，右，
headerTransparent:navigation.state.index==1？true:false，
headerStyle:navigation.state.index！=1{
背景颜色：'#000000'
} : {}
})
}
});
const Navigation=createAppContainer（RootStack）；