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中eval函数的使用方法与示例
Apr 09 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
JavaScript Date对象详解
Mar 01 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 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
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
深入理解node.js http模块
2018/01/24 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Django中Forms的使用代码解析
2018/02/10 Python
实用自动化运维Python脚本分享
2018/06/04 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
python的常见矩阵运算(小结)
2019/08/07 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
奶茶店创业计划书范文
2014/01/17 职场文书
同居协议书范本
2014/04/23 职场文书
大班幼儿评语大全
2014/04/30 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
入党介绍人意见范文
2015/06/01 职场文书
会议主持词通用版
2019/04/02 职场文书