Reactjs 分离导航器文件时重新渲染

我想将我的导航代码分为单独的文件，准确地说是3个文件，我想根据用户的角色加载一个堆栈导航器，我将在登录过程中收到它（如3个单独的应用程序），问题是如果我将文件堆叠在一起，它将是一个非常大的文件

这是我的主导航文件

import * as React from 'react';

// Apps Navigators
import VendorNavigator from '@vendor-app/routes';

// utils
import Api from '@utils/api';
import AsyncStorage from '@react-native-community/async-storage';
import Container from '@components/container';

// Icons
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

// contexts
const AuthContext = React.createContext(null);

// navigators
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

// import Screens
// Public Screens
import LoginScreen from '@layouts/auth/login';
import PasswordReset from '@layouts/auth/password-reset';
import PasswordResetCode from '@layouts/auth/password-reset-code';
import NewPassword from '@layouts/auth/new-password';

const Navigator = () => {

  const AuthStack = createStackNavigator();

  const Authenticated = createStackNavigator();

  const UnAuthenticated = createStackNavigator();

  React.useEffect(() => {
    const bootstrapAsync = async () => {
      await verifyUser();
      let token = await AsyncStorage.getItem('access_token');
      if (!token)
        dispatch({ type: 'SIGN_OUT' })
      else
        dispatch({ type: 'SIGN_IN', token: token})
    }
    bootstrapAsync()
  }, [])

  const verifyUser = async () => {
    let response = await Api.get('/auth/verify-token');
    if (response && response.status_code == 200) {
      let token = await AsyncStorage.getItem('access_token');
      dispatch({ type: 'SIGN_IN', token: token })
    } else {
      dispatch({ type: 'SIGN_OUT' })
    }
  }

  const authContext = React.useMemo(
    () => ({
      signIn: async (email_address, password, app) => {
        let response = await Api.post(`auth/login`, {
          email_address: email_address,
          password: password,
        });

        if (response && response.status_code == 200) {
          await AsyncStorage.setItem('access_token', response.data.access_token)
          await AsyncStorage.setItem('refresh_token', response.data.refresh_token)
          await AsyncStorage.setItem('user', JSON.stringify(response.data.user))
          dispatch({ type: 'SIGN_IN', token: response.data.access_token });
        }

        return response;
      },
      signOut: async () => {
        await AsyncStorage.removeItem('access_token')
        await AsyncStorage.removeItem('refresh_token')
        await AsyncStorage.removeItem('user')
        dispatch({ type: 'SIGN_OUT' })
      },
      signUp: async data => {
        dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
      },
    }),
    []
  );

  const [state, dispatch] = React.useReducer(
    (prevState, action) => {
      switch (action.type) {
        case 'SIGN_IN':
          return {
            ...prevState,
            is_authenticated: true,
            token: action.token,
            is_loading: false
          };
        case 'SIGN_OUT':
          return {
            ...prevState,
            is_authenticated: false,
            token: null,
            is_loading: false
          }
      }
    },
    {
      is_loading: true,
      is_authenticated: false,
      token: null
    }
  )

  function AuthenticatedStack() {
    return (
      <Authenticated.Navigator>
        {/*
          The idea is to have a conditional route here depending on the user's role, for example:
          {
            user.role == 'vendor'
            ? <Authenticated.Screen options={{headerShown: false}} name={'Tabs'} component={VendorNavigator} />
            : user.role == 'collector'
            ? <Authenticated.Screen options={{headerShown: false}} name={'Tabs'} component={CollectorNavigator} />
            : null
          }
        */}
        <Authenticated.Screen options={{headerShown: false}} name={'Tabs'} component={VendorNavigator} />
      </Authenticated.Navigator>
    )
  }

  function UnAuthenticatedStack() {
    return (
      <UnAuthenticated.Navigator
        screenOptions={{
          headerShown: false
        }}>
        {/* Login and password resets */}
        <UnAuthenticated.Screen name={'Login'} component={LoginScreen} />
        <UnAuthenticated.Screen name={'PasswordReset'} component={PasswordReset} />
        <UnAuthenticated.Screen name={'PasswordResetCode'} component={PasswordResetCode} />
        <UnAuthenticated.Screen name={'NewPassword'} component={NewPassword} />
      </UnAuthenticated.Navigator>
    )
  }


  return (
    <Container blockRender is_loading={state.is_loading}>
      <AuthContext.Provider value={authContext}>
        <AuthStack.Navigator>
          {
            state.is_authenticated
            ? <AuthStack.Screen options={{headerShown: false}} name={'Home'} component={AuthenticatedStack} />
            : <AuthStack.Screen options={{headerShown: false}} name={'Login'} component={UnAuthenticatedStack} />
          }
        </AuthStack.Navigator>
      </AuthContext.Provider>
    </Container>
  )

}

export {AuthContext};

export default Navigator;

import*as React from'React'；
//应用程序导航器
从“@vendor app/routes”导入VendorNavigator；
//乌提尔斯
从“@utils/Api”导入Api；
从“@react native community/async storage”导入异步存储；
从“@components/Container”导入容器；
//图标
从“反应本机向量图标/离子图标”导入离子图标；
从“反应本机向量图标/材料通信图标”导入材料通信图标；
//上下文
const AuthContext=React.createContext（null）；
//领航员
从'@react navigation/stack'导入{createStackNavigator}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
//导入屏幕
//公共屏幕
从“@layouts/auth/login”导入LoginScreen；
从“@layouts/auth/password reset”导入密码重置；
从“@layouts/auth/password reset code”导入密码resetcode；
从“@layouts/auth/new password”导入新密码；
常量导航器=（）=>{
const AuthStack=createStackNavigator（）；
const Authenticated=createStackNavigator（）；
const UnAuthenticated=createStackNavigator（）；
React.useffect（（）=>{
const bootstrapAsync=async（）=>{
等待verifyUser（）；
let token=wait AsyncStorage.getItem（'access_token'）；
如果（！令牌）
分派（{type:'SIGN_OUT'}）
其他的
分派（{type:'SIGN_-IN'，token:token}）
}
bootstrapAsync（）
}, [])
const verifyUser=async（）=>{
let response=wait-Api.get（'/auth/verify-token'）；
if（response&&response.status_code==200）{
let token=wait AsyncStorage.getItem（'access_token'）；
分派（{type:'SIGN_-IN'，token:token}）
}否则{
分派（{type:'SIGN_OUT'}）
}
}
const authContext=React.useMoom(
() => ({
登录：异步（电子邮件地址、密码、应用）=>{
let response=wait Api.post（`auth/login`{
电子邮件地址：电子邮件地址，
密码：密码，
});
if（response&&response.status_code==200）{
等待AsyncStorage.setItem（'access\u token'，response.data.access\u token）
等待AsyncStorage.setItem（'refresh\u token'，response.data.refresh\u token）
等待AsyncStorage.setItem（'user'，JSON.stringify（response.data.user））
分派（{type:'SIGN_-IN'，token:response.data.access_-token}）；
}
返回响应；
},
注销：异步（）=>{
等待AsyncStorage.removeItem（'access\u token'）
等待AsyncStorage.removeItem（'refresh\u token'）
等待AsyncStorage.removeItem（'用户'）
分派（{type:'SIGN_OUT'}）
},
注册：异步数据=>{
分派（{type:'SIGN_IN'，token:'dummy auth token'}）；
},
}),
[]
);
const[state，dispatch]=React.useReducer(
（状态、动作）=>{
开关（动作类型）{
“签到”案例：
返回{
…国家，
_是否已验证：正确，
令牌：action.token，
正在加载：错误
};
“注销”案例：
返回{
…国家，
是否已验证：错误，
令牌：null，
正在加载：错误
}
}
},
{
是真的吗，
是否已验证：错误，
令牌：空
}
)
函数AuthenticatedStack（）{
返回(
{/*
我们的想法是根据用户的角色在此处设置条件路由，例如：
{
user.role==“供应商”
? 
：user.role==“收集器”
? 
：null
}
*/}
)
}
函数UnAuthenticatedStack（）{
返回(
{/*登录和密码重置*/}
)
}
返回(
{
state.u是否经过身份验证
? 
: 
}
)
}
导出{AuthContext}；
导出默认导航器；

这是我的嵌套堆栈

import React from 'react';

// utils
import Api from '@utils/api';
import AsyncStorage from '@react-native-community/async-storage';
import Container from '@components/container';

// Icons
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

// navigators
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

// import Screens
import ListScreen from '@layouts/list';
import RetailerScreen from '@layouts/list/retailer';
import RetailerInvoiceScreen from '@layouts/list/retailer/invoice';
import CreateInvoiceScreen from '@layouts/list/retailer/create-invoice';
import CreateUserScreen from '@layouts/list/create-user';
import MapScreen from '@layouts/map';
import SettingsScreen from '@layouts/settings';

function VendorNavigator() {

    const tabNavigatorConfig = ({ route }) => ({
    tabBarIcon: ({focused, color, size}) => {
      let iconName;

      if (route.name == 'Retailers')
        iconName = focused ? 'store' : 'store-outline';
      else if (route.name == 'Map')
        iconName = focused ? 'map-sharp' : 'map-outline';
      else if (route.name == 'Settings')
        iconName = focused ? 'settings' : 'settings-sharp';

      return route.name == 'Retailers' ? (
          <MaterialCommunityIcons name={iconName} color={color} size={size} />
        ) : (
          <Ionicons name={iconName} color={color} size={size} />
        )
    }
  })

  const TabNavigator = createBottomTabNavigator();

  const RetailersListStack = createStackNavigator();

  function RetailersScreensAndSubScreens() {
    return (
      <RetailersListStack.Navigator
        screenOptions={{
          headerShown: false
        }}>
        <RetailersListStack.Screen name={'Retailers'} component={ListScreen} />
        <RetailersListStack.Screen name={'Retailer'} component={RetailerScreen} />
        <RetailersListStack.Screen name={'RetailerInvoice'} component={RetailerInvoiceScreen} />
        <RetailersListStack.Screen name={'CreateRetailer'} component={CreateInvoiceScreen} />
        <RetailersListStack.Screen name={'CreateUser'} component={CreateUserScreen} />
      </RetailersListStack.Navigator>
    )
  }

  return (
    <TabNavigator.Navigator
      screenOptions={tabNavigatorConfig}
      tabBarOptions={{
        activeTintColor: '#33A788',
        inactiveTintColor: '#000000',
      }}>
      <TabNavigator.Screen name={'Retailers'} component={RetailersScreensAndSubScreens} />
      <TabNavigator.Screen name={'Map'} component={MapScreen} />
      <TabNavigator.Screen name={'Settings'} component={SettingsScreen} />
    </TabNavigator.Navigator>
  )

}

export default VendorNavigator;

从“React”导入React；
//乌提尔斯
从“@utils/Api”导入Api；
从“@react native community/async storage”导入异步存储；
从“@components/Container”导入容器；
//图标
从“反应本机向量图标/离子图标”导入离子图标；
从“反应本机向量图标/材料通信图标”导入材料通信图标；
//领航员
从'@react navigation/stack'导入{createStackNavigator}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
//导入屏幕
从“@layouts/list”导入ListScreen；
从“@layouts/list/retailer”导入RetailerScreen；
从“@layouts/list/retailer/invoice”导入RetailerInvoiceScreen；
从“@layouts/list/retailer/create invoice”导入CreateInvoiceScreen；
从“@layouts/list/create user”导入CreateUserScreen；
从“@layouts/map”导入MapScreen；
从“@layouts/settings”导入设置屏幕；
函数VendorNavigator（）{
const tabNavigatorConfig=（{route}）=>({
tabBarIcon:（{聚焦，颜色，大小}）=>{
让我来；
如果（route.name==“零售商”）
iconName=聚焦的‘商店’：‘商店大纲’；
else if（route.name==“Map”）
iconName=聚焦？“地图锐化”：“地图轮廓”；
else if（route.name=='Settings'）
iconName=聚焦？'settings'：'settings sharp'；
返回路线。名称==“零售商”(
) : (
)
}
})
const TabNavigator=createBottomTabNavigator（）；
const RetailersListStack=createStackNavigator（）；
函数RetailerScreens和SubScreens（）{
返回(