Question

有两个stacknavigator用于在屏幕上导航。我想为isloggedin设置条件。如果已登录用户，则选择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'，并根据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'字段，使用上面的代码，通过构造函数定义更改loginIn的值，然后连接到您的登录表单，等

登录成功后如何加载主界面而不显示登录界面？

1 个答案: