我在反应原生中遇到TabNavigator和StackNavigator的问题。我想按下按钮时重置导航。 我的选项卡导航中有我的堆栈导航。问题是我只能重置一个导航...
计划:
-tabNavigator
-listing.js
-stackNavigator
-types.js
-picture.js
-ad.js
所以当我在ad.js中时,我点击它时有一个按钮,我的stackNavigation重置为list.js上的type.js和tabNavigator 所以我想最终回到Linsting.js。
我的导航:navigation.js
export const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Types'}),
],
key: null
})
export const listingAction = NavigationActions.navigate({
routeName: 'Listing',
})
const Stack = StackNavigator(
{
Types: {screen: SelectTypesScreen},
Picture: {screen: SelectPictureScreen},
Ad: {screen: CreateAd}
})
const Tab = TabNavigator(
{
Listing: {screen: ListingScreen},
Preference: {screen: PreferencesScreen},
Add: {screen : Stack}
},
{
}
)
export default class App extends Component {
render() {
return (
<Tab />
);
}
}
标签导航linsting.js
export default class Listing extends Component {
render() {
return (
<View>
<Text> Listing </Text>
</View>
);
}
}
堆栈导航ad.js
export default class CreateAd extends Component {
render() {
return (
<View>
<Text style={{marginTop: '80%', marginLeft: '40%'}}> Ad </Text>
<Button title="Ok" onPress={() => {console.log("displayer 1"), this.props.navigation.dispatch(resetAction), console.log("displayer 2"), this.props.navigation.dispatch(listingAction)}} />
</View>
);
}
}
答案 0 :(得分:0)
更好地更改Navigations嵌套结构。最好采用与文档完全相同的方式。根导航器可以是stacknavigator,您可以将tabnavigator添加为屏幕
const MainScreenNavigator = TabNavigator({
Recent: { screen: RecentChatsScreen },
All: { screen: AllContactsScreen },
});
const SimpleApp = StackNavigator({
Home: { screen: MainScreenNavigator },
Chat: { screen: ChatScreen },
});