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 相关文章推荐
js刷新框架子页面的七种方法代码
Nov 20 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
JS中数组重排序方法
Nov 11 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 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
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
基于initPHP的框架介绍
2013/04/18 PHP
2014过年倒计时示例
2014/01/31 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
prototype 的说明 js类
2006/09/07 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
python逆序打印各位数字的方法
2018/06/25 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
初三毕业评语
2014/12/26 职场文书
单位考核聘任报告
2015/03/02 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
MySQL 条件查询的常用操作
2022/04/28 MySQL