React Native 页面跳转之全局封装Android和IOS（二）

最新推荐文章于 2023-04-18 20:55:18 发布

置顶

一纸荒年-and

最新推荐文章于 2023-04-18 20:55:18 发布

阅读量800

点赞数

本文链接：https://blog.csdn.net/baidu_37831324/article/details/84673120

版权

本文介绍如何全局封装React Native的页面跳转，适用于Android和iOS。通过goOpenPage()和goBackPage()两个函数，简化组件间的导航操作。需配合'react-navigation'库使用，文中详细阐述了配置步骤、页面结构和具体实现代码。

摘要由CSDN通过智能技术生成

之前我已经写了（一），但是后来发现，只能在Android中使用，IOS无效果，因前段时间自己项目比较赶，一直没时间整理，这次抽时间重新整理了下；这样的话所有组件（包括子组件）页面跳转，再也不用把navigation传来传去了，直接调用两个函数搞定：打开界面goOpenPage()、关闭界面goBackPage()；

注：需要结合'react-navigation'一起使用，配置如下（下面的‘appKey’要更换自己工程的appKey）：

项目结构如下：

一：页面跳转导航配置与全局navigation配置类index.js

import React from "react";
import {createStackNavigator} from "react-navigation";
import {appNavigation} from "./src/util/JumpUtils";
import Demo1 from "./src/Demo1";
import Demo2 from "./src/Demo2";
import Demo1Children from "./src/Demo1Children";

//导航配置
const appNav = createStackNavigator({
    demo