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

Question

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

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

这是右选项卡视图(左侧选项卡视图按钮更改为后退按钮(：https://ibb.co/XzFB8v8

这是左侧选项卡视图(右侧选项卡视图按钮更改为后退按钮(：https://ibb.co/zP2ZBK5

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

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

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

我已经更新了我的应用程序.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' 传递(。这似乎运行良好，每次导航到 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);