转到底部导航选项卡上的主屏幕

时间:2019-05-16 11:44:17

标签: react-native stack-navigator appcontainer

在底部导航上按下一个标签时,我想返回到每个标签上的主屏幕,而不是转到该标签上次访问的屏幕,下面是我的代码,其中每个标签有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>
    );
  }
  }

0 个答案:

没有答案