在 react-native 中设置动态“initialRouteName" [英] set dynamic 'initialRouteName' in react-native

问题描述

问题很简单我知道同一个问题有很多答案，但我设置了自己的 App.js 文件，我尝试了几乎所有但没有成功.

所以我的 App.js 看起来像这样

import React, { Component } from 'react';进口 {平台，样式表，文本，看法，状态栏来自'反应原生';import { createStackNavigator } from 'react-navigation';import { Header, Button, Spinner } from './src/components/comman';从 'react-native-splash-screen' 导入 SplashScreen；从'./src/components/LoginForm'导入登录表单；从'./src/components/SignupForm'导入注册表格；从'./src/components/Home'导入首页；从'./src/components/ForgetPassword'导入忘记密码；从'react-native'导入{YellowBox}；YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);const App = createStackNavigator ({登录:{屏幕:登录表单}，主页:{屏幕:主页}，注册:{屏幕:注册表格}，忘记密码:{屏幕:忘记密码}，},{initialRouteName: '登录',});导出默认应用程序；

现在我将登录状态存储在我的 LoginForm.js 中的 AsyncStorage 中

<预><代码>..AsyncStorage.setItem('isLoggedIn', 'true').then((a) => {this.onLoginSuccess(responseData.user_id);});..

所以现在我想根据我的本地存储元素设置 initialRouteName.简单如果 isLoggedIn 是 true 然后 initialRouteName : Home 否则 initialRouteName : Login

简单但不知道如何在my App.js

请帮忙:)

解决方案

如你所见 这里:

<块引用>

如果您需要将 initialRouteName 设置为 prop，那是因为在呈现应用导航之前，您需要异步获取一些数据.处理此问题的另一种方法是使用 switchnavigator 并在获取异步数据时显示一个屏幕，然后在必要时使用参数导航到适当的初始路由.有关完整示例，请参阅 docs.

这是一个开放的RFC

更新

查看此处.

您会找到更多说明！

question is simple I know there are lots of answers available for the same question but I have differently set my own App.js file i tried almost all but no success.

so my App.js looks like this

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  StatusBar
} from 'react-native';
import { createStackNavigator  } from 'react-navigation';
import { Header, Button, Spinner } from './src/components/comman';
import SplashScreen from 'react-native-splash-screen';
import LoginForm from './src/components/LoginForm';
import SignupForm from './src/components/SignupForm';
import Home from './src/components/Home';
import ForgetPassword from './src/components/ForgetPassword';


import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
const App = createStackNavigator ({
  Login: { screen: LoginForm },
  Home: { screen: Home },
  Signup: { screen: SignupForm },
  ForgetPassword: { screen : ForgetPassword },
  },
  { 
  initialRouteName: 'Login',
  });

export default App;

Now I store login state in AsyncStorage in my LoginForm.js like this

.
.
AsyncStorage.setItem('isLoggedIn', 'true').then((a) => {
    this.onLoginSuccess(responseData.user_id);
});
.
.

so now i want to set initialRouteName based on my local storage element. Simple if isLoggedIn is true then initialRouteName : Home otherwise initialRouteName : Login

Simple but don't how to use this in my App.js

Please help :)

解决方案

As you can see here:

If you need to set the initialRouteName as a prop it is because there is some data that you need to fetch asynchronously before you render the app navigation. another way to handle this is to use a switchnavigator and have a screen that you show when you are fetching the async data, then navigate to the appropriate initial route with params when necessary. see docs for a full example of this.

And this is an open RFC

UPDATE

Take a look at here.

You'll find more description!

这篇关于在 react-native 中设置动态“initialRouteName"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！