Как использовать AsyncStorage в createBottomTabNavigator с React Navigation? - PullRequest
Новая
       30

Как использовать AsyncStorage в createBottomTabNavigator с React Navigation?

2 голосов
/ 17 марта 2019

Я работаю с Reaction-Navigation v3, и я хочу использовать AsyncStorage в createBottomTabNavigator для проверки, если пользователь вошел в систему.

Я сохраняю ключ в Stoage в LoginScreen: 

await AsyncStorage.setItem('@MyStorage:isLogged', isLogged);

И я хочуиспользовать AsyncStorage в моем стеке (TabStack): 

const TabStack = createBottomTabNavigator(
  {
    Home: { screen: HomeScreen, },
    // I need isLogged key from AsyncStorage here!
    ...(false ? {
      Account: { screen: AccountScreen, }
    } : {
      Login: { screen: LoginScreen, }
    }),
  },
  {
    initialRouteName: 'Home',
  }
);

Как я могу это сделать?

Мое окружение:

  • реагироватьРодной: 0.58.5
  • Реакция-навигация: 3.3.2

Ответы [ 3 ]

1 голос
/ 19 апреля 2019

Решение: создайте новый компонент AppTabBar и установите его в свойстве tabBarComponent 

const TabStack = createBottomTabNavigator({
    Home: { screen: HomeScreen, },
    Account: { screen: AccountScreen, }
},
{
  initialRouteName: 'Home',
  tabBarComponent: AppTabBar, // Here
});

И компонент AppTabBar: 

export default class AppTabBar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLogged: '0',
    };
  }

  componentDidMount() {
    this._retrieveData();
  }

  _retrieveData = async () => {
    try {
      const value = await AsyncStorage.getItem('isLogged');
      if (value !== null) {
        this.setState({
          isLogged: value,
        });
      }
    } catch (error) {
      // Error retrieving data
    }
  };

  render() {
    const { navigation, appState } = this.props;
    const routes = navigation.state.routes;
    const { isLogged } = this.state;

    return (
      <View style={styles.container}>
        {routes.map((route, index) => {
          if (isLogged === '1' && route.routeName === 'Login') {
            return null;
          }

          if (isLogged === '0' && route.routeName === 'Account') {
            return null;
          }

          return (
            <View /> // here your tabbar component
          );
        })}
      </View>
    );
  }

  navigationHandler = name => {
    const { navigation } = this.props;
    navigation.navigate(name);
  };
}
1 голос
/ 17 марта 2019

Вам не нужно этого делать, просто вы можете проверить действительный сеанс на экране входа в систему.

Вам необходимо создать 2 стека, один для экранов auth и ваш TabStack дляlogged пользователи: 

const TabStack = createBottomTabNavigator({
    Home: { screen: HomeScreen, },
    Account: { screen: AccountScreen, }
},
{
  initialRouteName: 'Home',
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
});

const stack = createStackNavigator({
  Home: {screen: TabStack},
  Login: { screen: LoginScreen, }
});

, а затем проверьте правильность сеанса в LoginScreen в методе componentDidMount. 

class LoginScreen extends Component {
  componentDidMount(){
    const session = await AsyncStorage.getItem('session');

    if (session.isValid) {
      this.props.navigate('home')
    }
  }
}
0 голосов
/ 17 марта 2019

На экране «Загрузка» прочитайте состояние входа в систему из AsyncStorage и сохраните его в своем хранилище Redux (или любом другом глобальном механизме обмена данными по вашему выбору) - я использую здесь избыточность, затем читаю этот фрагмент данныхв вашем компоненте стека, как показано ниже: 

import React from "react";
import { View, Text } from "react-native";
import { connect } from "react-redux";
import { createStackNavigator } from "react-navigation";

class Stack extends React.Component {
  render() {
    const { isLoggedIn } = this.props.auth;

    const RouteConfigs = {
      Home: () => (
        <View>
          <Text>Home</Text>
        </View>
      ),
      Login: () => (
        <View>
          <Text>Login</Text>
        </View>
      )
    };

    const RouteConfigs_LoggedIn = {
      Home: () => (
        <View>
          <Text>Home</Text>
        </View>
      ),
      Account: () => (
        <View>
          <Text>Account</Text>
        </View>
      )
    };

    const NavigatorConfig = { initialRouteName: "Login" };

    const MyStack = createStackNavigator(
      isLoggedIn ? RouteConfigs_LoggedIn : RouteConfigs,
      NavigatorConfig
    );

    return <MyStack />;
  }
}

const mapStateToProps = ({ auth }) => ({ auth });

export default connect(mapStateToProps)(Stack);
...