into
就像Facebook,Instagram和任何其他移动应用一样,我想实现"返回stacknavigator中的初始屏幕"
- 如果用户按按钮,
- 它可以回到第一页。
简单用例
- 请参阅tabnavigator
- 转到" feed"选项卡
- 转到"用户"屏幕
- 转到另一个"用户"屏幕
- 按主选项卡图标 - 'feed'}
- 返回" feed"选项卡//,因此您不会看到"后退"按钮
,如果您不了解此用例,请发表评论,我将为您绘制其状态流量
我主Tabnavigator上图标的代码。
navigationOptions: ({ navigation }) => ({
header: null,
tabBarIcon: ({ focused }) => {
const { routeName } = navigation.state;
....
return (
<TochableWithoutFeedback onPress={()=>{navigation.goback(iconName)}>
// undefined is not a function when I press the Button
// deeper screen. (not getting any error on Main)
<Ionicons
name={iconName}
size={30}
style={{ marginBottom: -3 }}
color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
<TochableWithoutFeedback>
);
},
实际上,这取决于您的路由有多少深,例如Instagram 2至3深的路由,否则tabs
因此,您可以使用
重置路由器或返回主路由器this.props.navigation.goBack(null)
例如。
标签导航儿童AHS堆栈导航,因此在堆栈中,您可以做
之类的事情// Anyone watching this, please check your react-navigation version
// I'm using ^1.0.0-beta.21.
// props for tabBarOnpress varies can be varied (Editor John Baek)
tabBarOnPress: ({scene, jumpToIndex}) => {
jumpToIndex(scene.index)
navigation.dispatch(NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'home' }) // go to first screen of the StackNavigator
]
}))
}
因此,每当有人按Home Tab时,所有路由重置,您就会看到Feed屏幕,就像Instagram
TabNavigation
-Home
|
StakeNavigation
|
mainScreen //main of home
Subrouts
RouteToProfile //just like insta
-Search
|
StakeNavigation
|
mainScreen //main of search
searchResult //if people serch some specific
继续...因此,在Tab的StakenAvigation级别重置路线
const SubHome = StackNavigator({
Home: { screen: Home },
Home2: { screen: Home2 },
Home3 : { screen: Home3 },
},{
navigationOptions:({navigation,screenProps})=>({
tabBarLabel: I18n.t('tab_car'),
tabBarIcon: ({ tintColor }) => (
<CustomIcon name={'Home'} width={28} height={30} fill={tintColor} />
),
tabBarOnPress: (tab, jumpToIndex) => {
jumpToIndex(tab.index)
navigation.dispatch(NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Home' }) // go to first screen of the StackNavigator
]
}))
}
}),
headerMode:'none'
});