在底部导航上按下一个标签时,我想返回到每个标签上的主屏幕,而不是转到该标签上次访问的屏幕,下面是我的代码,其中每个标签有4个屏幕。
我正在使用https://callstack.github.io/react-native-paper/bottom-navigation.html
例如,当我单击主屏幕,然后导航到列表屏幕时,当我单击主屏幕图标时,我想返回主屏幕。
const HomeContainer = createAppContainer(createStackNavigator({
Home: { screen: HomeScreen },
List: { screen: PriviligesCategoryList },
Detail: { screen: PartnersDetail },
}, {
initialRouteName: 'Home',
headerMode: 'none',
}));
const CategoryContainer = createAppContainer(createStackNavigator({
Home: { screen: CategoryOverview },
List: { screen: PriviligesCategoryList },
Detail: { screen: PartnersDetail },
}, {
headerMode: 'none',
}));
const MapContainer = createAppContainer(createStackNavigator({
Home: { screen: PrivilegesMap },
Detail: { screen: PartnersDetail },
}, {
headerMode: 'none',
}));
const AccountContainer = createAppContainer(createStackNavigator({
Home: { screen: AccountOverview },
EditAccount: { screen: EditAccountDetails }
}, {
headerMode: 'none',
}));
const LoginContainer = createAppContainer(createStackNavigator({
Login: { screen: LoginScreen },
Register: { screen: CreateAccount },
Forgot: { screen: ForgotPassword }
}, {
headerMode: 'none',
}));
export default class NavigationScreen extends React.Component {
state = {
index: 0,
routes: [
{ key: 'home', title: 'Home', icon: require("./assets/home-icon.png"), color: '#222'},
{ key: 'category', title: 'Categorie', icon: require("./assets/category-icon.png"), color: '#222'},
{ key: 'location', title: 'Locaties', icon: require("./assets/locations.png"), color: '#222'},
{ key: 'account', title: 'Account', icon: require("./assets/account.png"), color: '#222'},
],
loggedIn: true,
loading: true,
};
_handleIndexChange = index => this.setState({ index });
_renderScene = BottomNavigation.SceneMap({
home: HomeContainer,
category: CategoryContainer,
location: MapContainer,
account: AccountContainer,
});
render() {
let app;
app = <BottomNavigation
style={Styles.navigation}
navigationState={this.state}
onIndexChange={this._handleIndexChange}
renderScene={this._renderScene}
activeColor={'#E8BC30'}
inactiveColor={'#FFF'}
labeled={true}
/>;
return (
<Portal>
{app}
</Portal>
);
}
}