React-Native在用户注册后重新启动应用程序

时间:2018-07-30 00:43:53

标签: javascript react-native

我有一个反应式应用程序,其顶级App.js如下:

const AuthStack = createStackNavigator(

    { Landing, SignUpWithGoogle },

    { 
          initialRouteName  : 'Landing' 
        , navigationOptions : {
            header : null
        }
    }
);


const AppStack = createStackNavigator(

    {   
          AppContainer
        , Campaign
        , Compose
    },

    { 
          initialRouteName  : 'AppContainer' 
        , navigationOptions : {
            header : null
        }
    }
);


/**
    @TODO: 
        force app to reload on user creation ... 

        there needs to be a state transition on user creation
        ... not sure how to 
*/
class App extends React.Component {

    render () {

        const stack = (!this.props.authenticating && this.props.user)
            ? <AppStack  {...this.props} />
            : <AuthStack />


        return (
            <Loader
                isLoaded        = { !this.props.authenticating && this.props.feedIsLoaded}
                imageSource     = {logo}
                backgroundStyle = {loading.loadingBackgroundStyle}
            >
                {stack}
            </Loader>
        )

    }
}

https://github.com/TheSavior/react-native-mask-loader中有一个Loader组件,用于使用启动页面隐藏该应用程序,直到该应用程序提取了用户身份验证数据或确定该用户是新用户。除非用户首次注册,然后应用程序立即跳入身份验证模式,并且无法加载我想要给新用户的初始数据,否则此方法效果很好。解决此问题的唯一方法是重新启动应用程序,这是不可行的。是否可以更好地在AuthStackAppStack之间进行转换,以便我注册时想要的所有信息都在那里?一种方法是强制reload应用程序,以便我们直接返回到Loader屏幕和状态,但是目前尚不清楚如何实现。

1 个答案:

答案 0 :(得分:1)

我为用例做了类似的事情。

const Routes =  {
  Login: {
    screen: Login
  },
  Status: {
    screen: Status,
    navigationOptions: {
      gesturesEnabled: false,  // To prevent swipeback
    },
  },
...
};

const LoggedRootStack = createStackNavigator(
  {
    ...Routes
  },
  {
    initialRouteName: 'Status'
  }
)

const RootStack = createStackNavigator(
  {
    ...Routes
  },
  {
    initialRouteName: 'Login'
  }
)

要传递道具,请使用Redux来保持全局状态。您可以将组件连接到redux状态以访问道具。希望这会有所帮助