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

Posted 2023-02-22

【中文标题】React Navigation - 基于 Routes.js 中的上下文值的条件渲染屏幕

【英文标题】：React Navigation - Conditional rendering screen based on Context value in 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 相同

【参考方案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  ,