javascript - 在用户注册时以 React-native 方式重新启动应用程序

标签 javascript react-native

我有一个 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-loaderLoader组件用启动页面隐藏应用程序,直到应用程序获取用户身份验证数据或确定这是新用户。这非常有效,除非用户第一次注册,然后应用程序会直接跳转到身份验证模式,并且无法加载我想要为新用户提供的初始数据。解决这个问题的唯一办法就是重新启动应用程序,这是行不通的。有没有办法更好地在 AuthStack 和 AppStack 之间转换,以便我想要的注册信息都在那里?一种方法是强制重新加载应用程序,以便我们返回到Loader屏幕和状态,但目前尚不清楚如何做到这一点。

最佳答案

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

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'
  }
)

要传递 Prop ,请使用 Redux为了保持全局状态。您可以将组件连接到 redux 状态以访问 props。希望这有帮助

关于javascript - 在用户注册时以 React-native 方式重新启动应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51585723/

相关文章:

javascript - 如何从视频 HTML 元素中获取帧精确搜索?

javascript - react native中常用的js模块

java - 如何在 iOS 上的 Turbo 模块中发出事件

react-native - 如何用react native实现圆形图片按钮

JavaScript 构造函数属性无法识别 - Babylon.js

javascript - 打包时 Sencha Touch 2 依赖错误

javascript - 使用关键字搜索 json

linux - 我无法在 Ubuntu 上安装 xde expo

android - 在后台和前台使用 Expo 更改推送通知中的角标(Badge)计数

javascript - jtable (jquery) 缺少对话框格式