Реактивный доступ к данным цепочки ключей в навигации

Question

Я создаю приложение, и в качестве теста я храню токен в связке ключей. В навигации я использую стековый навигатор и переключатель навигатора. Я пытаюсь извлечь токен из цепочки для ключей и использовать его для определения intialRouteName: если токен существует -> Домой, если нет -> аутентификация.

Так вот мой код:

Navigation.js

import React, { Component } from 'react'

import {
  createStackNavigator,
  createAppContainer,
  createSwitchNavigator
} from 'react-navigation'

import Login from '../screens/Login'
import Register from '../screens/Register'
import Home from '../screens/Home'

import * as Keychain from 'react-native-keychain'


async function isLogged() {
 const token = await Keychain.getGenericPassword()
 if(token.username) {
   return 'App'
 }else {
   return 'Auth'
 }
}


const AppStack = createStackNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        header: null
      }
    },
  }
)

const AuthStack = createStackNavigator(
  {
    Login: {
      screen: Login,
      navigationOptions: {
        header: null
      }
    },
    Register: {
      screen: Register,
      navigationOptions: {
        header: null
      }
    }
  },
  {
    headerLayoutPreset: 'center',
    initialRouteName: 'Login'
  }
)
const MainNavigator = createAppContainer(
  createSwitchNavigator(
    {
      App: AppStack,
      Auth: AuthStack
    },
    {
      initialRouteName: isLogged()
    }
  )
)

export default MainNavigator

App.js

import React, { Component } from 'react'
import { Provider } from 'react-redux'
import { persistor, store } from './src/store/createStore'
import { PersistGate } from 'redux-persist/integration/react'
import MainNavigator from './src/navigation/StackNavigation'


export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <MainNavigator></MainNavigator>
        </PersistGate>
      </Provider>
    )
  }
}

К сожалению, это не работает, навигатор отображается перед получением данных токена. У меня возникли проблемы, чтобы выяснить, как получить данные и правильно отобразить представление .. Есть идеи?

Answer 1

Вы можете сделать что-то вроде этого:

• Создайте компонент поверх всех страниц, который извлекает токен из цепочки ключей и перемещайтесь соответственно следующим образом:

  import React, { Component } from 'react';
  import {View} from 'react-native';
  import{Loading} from './LoadingComponent';
  import * as Keychain from 'react-native-keychain'
  
  class TopComponent extends Component {
  
  componentDidMount(){
   //retireve your token here ... 
  this.setState({isLoading:false}); // set loading to false
  if(token.username) {
    this.props.navigation.navigate('AppStack')
  }else {
    this.props.navigation.navigate('AuthStack')
   } 
  }
  
    constructor(props) {
        super(props);
        this.state = {
         isLoading:true,
        }
      }
  
    render() {
  
        if(this.state.isLoading == true){
            return (
              <Loading />
            );
          }else{
            return(
              <View></View>
            );
          }
    }
  }
  
  export default TopComponent;
  

• Ваша загрузка (компонент индикатора активности):

  import React from 'react';
  import {
      ActivityIndicator,
      StyleSheet,
      Text,
      View,
    } from 'react-native'
  
  const styles = StyleSheet.create({
      loadingView: {
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1
      },
      loadingText: {
        color: '#512DA8',
        fontSize: 14,
        fontWeight: 'bold'
      }
  });
  
  export const Loading = () => {
      return(
          <View style={styles.loadingView} >
              <ActivityIndicator size="large" color="#512DA8" />
              <Text style={styles.loadingText} >Loading . . .</Text>
          </View>
      );
  }
  

• Наконец, удалите функцию logged () из навигатора коммутатора, добавьте TopComponent в навигатор коммутатора и установите его в качестве исходного маршрута.