React Navigation - 基于 Routes.js 中的上下文值的条件渲染屏幕答案

【问题标题】：React Navigation - Conditional rendering screen based on Context value in Routes.jsReact Navigation - 基于 Routes.js 中的上下文值的条件渲染屏幕
【发布时间】：2020-06-28 08:30:37
【问题描述】：

我在 RNavigation 中遇到了条件渲染的问题，

假设我有 3 个选项卡（主页、上传、个人资料）。

我需要处理Upload screen，如果用户已经登录，

实际上我已经创建了自己的上下文包含isLoggedin，但我不知道如何在Routes.js 中使用它

const TabNavigator = createMaterialTopTabNavigator({
  Home:{ screen:Home },
  Upload:{ screen:Upload }, // here i need to handle if user not logged in yet i want to use screen:PleaseLogin
  //Upload:this.context.User.isLoggedin ? {screen:Upload} : {screen:PleaseLogin}
  Profile:{ screen:Profile },
})

我认为这种情况与使用 createSwitchNavigator 的 Auth Flow 不同

我怎样才能实现它？

编辑：

我不知道如何在Routes.js 中添加this.context，因为Routes.js 不是react component

【问题讨论】：

是否需要使用context-api？您也可以为此使用 AsyncStorage。
@AnusKaleem 我认为是的，我页面的所有内容都取决于登录状态，因为我的应用程序不会强制用户在查找内容之前登录/注册
也可以通过异步存储进行管理。只需在成功登录尝试时将 isloggedin 密钥设置为 true 并从应用程序中的任何位置访问该密钥。 AsyncStorage 与 android 中的 SharedPreferences 相同

标签： react-native react-navigation conditional-rendering context-api

【解决方案1】：

你可以试试这个

Upload:{ screen:this.context.User.isLoggedin ? Upload : PleaseLogin  },

【讨论】：

我不知道如何在Routes.js 中添加this.context，因为Routes.js 不是反应组件
抱歉，回复晚了，正如@Asad 所提到的，您可以将isLoggedin 设置为反应component 中的全局变量，然后您可以在任何地方使用它。

【解决方案2】：

您可以在 this.context.User.isLoggedin 将要设置的位置添加一个全局变量

global.isLoggedin = this.context.User.isLoggedin;

那么

Upload:{ global.isLoggedin ? Upload : PleaseLogin  },

【讨论】：