React Native 混合开发多入口加载方式详解


Posted in Javascript onSeptember 23, 2019

在已有app混合开发时,可能会有多个rn界面入口的需求,这个时候我们可以使用RCTRootView中的moduleName或initialProperties来实现加载包中的不同页面。

目前使用RCTRootView有两种方式:

  • 使用initialProperties传入props属性,在React中读取属性,通过逻辑来渲染不同的Component
  • 配置moduleName,然后AppRegistry.registerComponent注册同名的页面入口

这里贴出使用0.60.5版本中ios项目的代码片段:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
 RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
 RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
            moduleName:@"AwesomeProject"
            initialProperties: @{
              @"screenProps" : @{
                @"initialRouteName" : @"Home",
                },
              }];

 rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

 self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
 UIViewController *rootViewController = [UIViewController new];
 rootViewController.view = rootView;
 self.window.rootViewController = rootViewController;
 [self.window makeKeyAndVisible];
 return YES;
}

initialProperties

这种方式简单使用可以通过state判断切换界面,不过项目使用中还是需要react-navigation这样的导航组件搭配使用,下面贴出的代码就是结合路由的实现方案。

screenProps是react-navigation中专门用于传递给React组件数据的属性,createAppContainer创建的组件接受该参数screenProps,并传给访问的路由页面。

class App extends React.Component {
  render() {
    const { screenProps } = this.props;

    const stack = createStackNavigator({
      Home: {
        screen: HomeScreen,
      },
      Chat: {
        screen: ChatScreen,
      },
    }, {
      initialRouteName: screenProps.initialRouteName || 'Home',
    });

    const AppContainer = createAppContainer(stack);

    return (
      <AppContainer
        screenProps
      />
    );
  }
}

moduleName

我们按照下面代码注册多个页面入口之后,就可以在原生代码中指定moduleName等于AwesomeProject或者AwesomeProject2来加载不同页面。

AppRegistry.registerComponent("AwesomeProject", () => App);
AppRegistry.registerComponent("AwesomeProject2", () => App2);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
JS分页效果示例
Oct 11 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 #Javascript
node 文件上传接口的转发的实现
Sep 23 #Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 #Javascript
Electron 调用命令行(cmd)
Sep 23 #Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 #Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 #Javascript
小程序实现上下移动切换位置
Sep 23 #Javascript
You might like
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
PHP中的extract的作用分析
2008/04/09 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
python私有属性和方法实例分析
2015/01/15 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
Python读取properties配置文件操作示例
2018/03/29 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
python实现手机销售管理系统
2019/03/19 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
2014年大班元旦活动方案
2014/02/26 职场文书
小学生手册家长评语
2014/04/16 职场文书
团日活动总结书格式
2014/05/08 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript