React Native-如果有令牌，则导航到仪表板

Question

我正在制作具有基本登录和注销功能的应用程序。以下是我在React Native Navigation（V5）中的嵌套堆栈导航器。

// App.js

const Stack = createStackNavigator();

function noAuth() {
  return (
    <Stack.Navigator screenOptions={{headerShown: false}}>
      <Stack.Screen name="Loading" component={Loading} />
      <Stack.Screen name="Login" component={Login} />
    </Stack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

function bottomTapNavigator() {
  var role = this.props.role; // from redux

  if (role === 'admin') {
    return (
      <Tab.Navigator
        tabBarOptions={{
          activeTintColor: '#E9786F',
          showIcon: true,
          inactiveTintColor: '#000',
        }}
      >
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Employees" component={EmployeeScreen} />
        <Tab.Screen name="Members" component={MembersScreen} />
        <Tab.Screen name="Statistics" component={StatisticsScreen} />
        <Tab.Screen name="Logout" component={LogoutScreen} />
      </Tab.Navigator>
    );
  } else if (role === 'employee') {
    return (
      <Tab.Navigator
        tabBarOptions={{
          activeTintColor: '#E9786F',
          showIcon: true,
          inactiveTintColor: '#000',
          // style: styles.tabBar,
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsStackScreen} />
        <Tab.Screen name="Logout" component={LogoutScreen} />
      </Tab.Navigator>
    );
  }
}

export default class Screens extends React.Component {
  render() {
    return (
      <NavigationContainer ref={navigationRef}>
        <Stack.Navigator screenOptions={{headerShown: false}}>
          {(this.props.accessToken == null) | '' ? (
            <>
              <Stack.Screen name="Auth" component={Root} />
            </>
          ) : (
            <>
              <Stack.Screen name="Dashboard" component={Dashboard} />
            </>
          )}
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

我正在使用条件来检查通过reducer在异步存储中令牌是否可用。如果可用，则“仪表板”屏幕（“底部导航”）将成为“主堆栈”，如果没有，则“授权”屏幕（“堆栈”导航）将成为主堆栈。我使用这种情况是为了防止用户按下返回按钮后返回登录屏幕。

“ Loading”（加载）屏幕是检查令牌的起始屏幕。

//Loading.js

import React, {Component} from 'react';
import {Text, StyleSheet, View, ActivityIndicator} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import {connect} from 'react-redux';
import * as RootNavigation from '../../actions/RootNavigation';
import {StackActions} from '@react-navigation/native';
class Loading extends Component {
  userAuth = async () => {
    alert('EMTERED');
    const accessToken = await AsyncStorage.getItem('accessToken');
    const refreshToken = await AsyncStorage.getItem('refreshToken');
    const id = await AsyncStorage.getItem('id');

    this.props.setOnlyToken(accessToken, refreshToken);

    //Redirecting the user as per the token
    this.props.navigation.navigate(accessToken != null ? 'Dashboard' : 'Auth');

    { I have used the below methods also but no success}

    // if (accessToken != null) {
    //   this.props.navigation.dispatch(StackActions.push('Dashboard'));
    // } else {
    //   RootNavigation.navigate('Login');
    // }


    // {
    //   accessToken != null
    //     ? RootNavigation.navigate('Dashboard', {});
    //     : RootNavigation.navigate('Login', {});
    // }


  };
  componentDidMount() {
    this.userAuth();
  }
  render() {
    return (
      <View style={[styles.container, styles.horizontal]}>
        <ActivityIndicator size={100} color="#812727" />
      </View>
    );
  }
}
const mapStateToProps = state => {
  return {
    apiCalls: state.apiCalls,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    setOnlyToken: (aToken, rToken) =>
      dispatch({type: 'setOnlyToken', value1: aToken, value2: rToken}),
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Loading);

在我的场景中，用户已登录，它应通过我进入DASHBOARD屏幕，其中HOME是DASHBOARD堆栈的初始路由，但会引发此错误。

我已阅读以下文件-Nesting Navigator-Navigation without Navigation props

[如果有人审查并告诉我我在这里做错了。

Answer 1

总而言之，为了能够浏览场景，您需要注册。

您会有类似的东西；您的Dashboard JSX和使用以下结构导入它的文件：

export const Dashboard = {
  name: 'Dashboard',
  component: DashboardJSX
};

您将执行以下操作来注册：

import { Navigation } from 'react-native-navigation';
import { Dashboard, Login } from './scenes'

// scenes 
const screens = [
    Login,
    Dashboard,
];

screens.forEach((scene) => Navigation.registerComponent(scene.name))

Note：如果您想详细检查它的工作方式，文件结构等。我建议check this article谈论React Native Navigation（V2）。