如何在登录成功后加载主屏幕而不显示登录屏幕？

Question

有两个用于屏幕导航的堆栈导航器。我想为 isloggedin 获取条件。如果登录用户则 select Appstack 既不是 AuthStack。如何在这段代码中做到这一点？有人可以建议我修改吗？

const AuthStack = createStackNavigator({
    Welcome: {screen: WelcomeScreen,
      navigationOptions: {
        header:null
      }},
    Login:  LoginScreen,
    Signup: SignupScreen,
    Forgot:ForgotScreen,
});

const AppStack =createStackNavigator(
    {
        Dashboard: DashboardScreen,
        ScanScreen:ScanScreen,
    });


export default createSwitchNavigator(
    {
      App:AppStack,
      Auth:AuthStack,
    },
    {   
      initialRouteName:'Auth',
    }
);

Answer 1

在您定义和导出路由器的地方，定义并导出一个函数，该函数接受布尔参数 'isLoggedIn' 和 returns 相应的路由器，基于 isLoggedIn 的值。

const AuthStack = createStackNavigator({
    Welcome: {screen: WelcomeScreen,
      navigationOptions: {
        header:null
      }},
    Login:  LoginScreen,
    Signup: SignupScreen,
    Forgot:ForgotScreen,
});

const AppStack =createStackNavigator(
    {
        Dashboard: DashboardScreen,
        ScanScreen:ScanScreen,
    });

// This is the function that does the work, it will render
// the either Auth or App router, based on if you're logged in.
export const createRootNavigator = (isLoggedIn = false) => {
   if (isLoggedIn === false) {
      return <AuthStack/>
   } else {
      return <AppStack/>
   }
};

然后在您的应用程序组件（或任何渲染路由器的地方）中，我们需要导入此函数，并无论用户当前是否登录都将其传递给它。

'file-above.js' 是上面的代码，即您在示例中给出的代码。

下面的粗略示例。

// We import the file
import {createRootNavigator} from './file-above.js'

class App extends Component {

    constructor (props) {
        super(props);

        this.state({
           // Switching this will switch your stack router.
           loggedIn: false
        });
    }

    render () {

        const {loggedIn} = this.state;

        // Here we're rendering the router, passing in the 
        // loggedIn variable from state, this will dictate if the
        // Auth or App router is rendered.      
        return createRootNavigator(loggedIn); 
    }
}

当然这里缺少的是应用程序组件状态切换上的 'loggedIn' 字段，使用上面的代码，通过构造函数定义更改 loggedIn 的值，然后连接到您的登录表单(s)等

如何在登录成功后加载主屏幕而不显示登录屏幕？

How to load Home screen without showing login screen after login successful?

react-native

if-statement

stack-navigator