首页 > 解决方案 > 没有 {type:reset} 的 React Native Router Flux Freezing

问题描述

我在我的移动应用程序上使用React Native Router Flux进行路由。

页面结构是这样的;

Login.js 获取用户密码和用户名验证并将用户令牌存储在 AsyncStorage 如果应用程序有用户令牌将用户重定向到 MainPage.js

ComponentWillMount()方法中的重定向)

MainPage.js 对我的后端服务器进行 API 调用以列出一些数据

DetailPage.js 对我的后端服务器进行 API 调用以获取一些详细数据。

--

我的路由器结构;

<Roter>
    <Scene key="root">
        <Scene initial component={Login} key="login" />
        <Scene component={MainPage} key="mainpage" />
        <Scene component={DetailPage} key="detailpage" />
    </Scene>
</Router>

--

问题是;

当我想从MainPage导航到DetailPage时,我无法Actions.detailpage()使用Actions.detailpage({type:"reset"})

如果我尝试仅Actions.detailpage()在 MainPage 上使用冻结的应用程序。但是我 console.log("this is detail page") 我可以看到输出。实际上我可以导航,Actions.detailpage()但我的 DetailPage 无法加载到屏幕。

我有网络电话。导航堆栈不处理这个繁重的过程吗?

如果我使用Actions.detailpage({type:"reset"}),导航历史记录丢失。所以我不能在顶部导航栏上使用后退按钮。

我在这里缺少什么?

动作重置属性:清除路由堆栈并将场景推送到第一个索引。不会发生过渡。

https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md#actions


编辑:

当我删除所有路由配置并添加两个空场景(如 PageA.js 和 PageB.js)时,当我尝试从 PageA 跳转到 PageB 时仍然冻结

<Roter>
        <Scene key="root>
            <Scene initial component={PageA} key="page_a" />
            <Scene component={PageB} key="page_b" />
        </Scene>
    </Router>

我仍然得到同样的错误。我的应用程序中的某些内容阻止了页面渲染和场景加载。我如何检查这个问题?

我的依赖也是;

"dependencies": {
    "@react-native-community/async-storage": "^1.4.2",
    "react": "16.8.3",
    "react-native": "0.59.8",
    "react-native-elements": "^1.1.0",
    "react-native-facebook-account-kit": "^1.1.0",
    "react-native-fbsdk": "^0.8.0",
    "react-native-iap": "^2.5.5",
    "react-native-router-flux": "^4.0.6",
    "react-native-vector-icons": "^6.5.0"
  },

标签: javascriptreactjsreact-nativereact-native-router-flux

解决方案


你用过Actions.push('scene key')吗?我无法直接移动到特定场景,但这个可能会对你有所帮助。我正在考虑使用反应导航


推荐阅读