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字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 Javascript
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
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
常见的PHP五种设计模式小结
2011/03/23 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
Python中的heapq模块源码详析
2019/01/08 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
资产经营总监岗位职责
2013/12/04 职场文书
家长会邀请书
2014/01/25 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
研究生导师评语
2014/12/31 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
小学数学教学反思范文
2016/02/16 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
自荐信大全
2019/03/21 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
python绘制云雨图raincloud plot
2022/08/05 Python