Перейти на главный экран на нижней вкладке навигации нажмите - PullRequest
Новая
       35

Перейти на главный экран на нижней вкладке навигации нажмите

0 голосов
/ 16 мая 2019

Когда на нижней панели навигации нажата вкладка, я хочу вернуться к главному экрану на каждой вкладке вместо перехода к последнему посещенному экрану на вкладке, ниже приведен мой код с моими 4 экранами для каждой вкладки.

Я использую https://callstack.github.io/react-native-paper/bottom-navigation.html

Так, например, когда я нажимаю на home, затем перехожу на экран списка, когда я нажимаю на иконку home, я хочу вернуться к домашнему экрану. 

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