iOS原生 和 react native视图混编
在iOS原生功能中加入RN,请看之前 写的 RN与iOS交互系列文章.本篇只讲下视图混编.
关键点只有二:
1.通过 RCTRootView 加载RN视图.
2.RN中,只需要AppRegistry.registerComponent()导出即可.
关键代码:
OC里面:
//
// RootViewController.m
// iOSRN
//
// Created by Shaoting Zhou on 2017/12/8.
// Copyright © 2017年 Shaoting Zhou. All rights reserved.
// #import "RootViewController.h"
#import <React/RCTRootView.h>
#define Main_Screen_Height [[UIScreen mainScreen] bounds].size.height
#define Main_Screen_Width [[UIScreen mainScreen] bounds].size.width
@interface RootViewController () @end @implementation RootViewController - (void)viewDidLoad {
[self loadIOSView];
[self loadRNView]; }
#pragma mark - 添加IOS视图
-(void)loadIOSView{
self.view.backgroundColor = [UIColor redColor]; NSString * strUrl = @"http://localhost:8081/App.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"iosrn"
initialProperties:nil
launchOptions:nil];
rootView.frame = CGRectMake(, , , ); [self.view addSubview:rootView]; } #pragma mark - 添加rn视图
-(void)loadRNView{
[super viewDidLoad];
NSString * strUrl = @"http://localhost:8081/index.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl]; RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"iosrn"
initialProperties:nil
launchOptions:nil];
rootView.frame = CGRectMake(, Main_Screen_Height/, Main_Screen_Width, Main_Screen_Height/); UILabel * la = [[UILabel alloc]initWithFrame:CGRectMake(, , , )];
la.backgroundColor = [UIColor blueColor];
la.text = @"我是原生";
[rootView addSubview:la]; [self.view addSubview:rootView]; } - (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
} /*
#pragma mark - Navigation // In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
// Get the new view controller using [segue destinationViewController].
// Pass the selected object to the new view controller.
}
*/ @end
RN里面:
import React, { Component } from 'react';
import {
AppRegistry,
Platform,
StyleSheet,
Text,
View
} from 'react-native'; const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
}); export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text>
我是RN
</Text>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: ,
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: ,
textAlign: 'center',
margin: ,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: ,
},
}); AppRegistry.registerComponent('iosrn', () => App);
效果如图:
github: https://github.com/pheromone/IOS-native-and-React-native-interaction 中的 iOSRN
iOS原生 和 react native视图混编的更多相关文章
- 一个资深iOS开发者对于React Native的看法
一个资深iOS开发者对于React Native的看法 当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javasc ...
- iOS 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
- 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
- 现有iOS项目集成React Native过程记录
在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...
- 原生工程接入Flutter实现混编
前言 上半年我定的OKR目标是帮助团队将App切入Flutter,实现统一技术栈,变革成多端融合开发模式.Flutter目前是跨平台方案中最有潜力实现我们这个目标的,不管是Hybird还是React ...
- [转] 一个资深iOS开发者对于React Native的看法
当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很 ...
- Android原生嵌入React Native
1.首先集成的项目目录 我使用的是直接按照react-native init Project 的格式来导入的,也就是说,我的Android项目目录是跟node_modules是在一个目录下的. 我们i ...
- 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 【React Native】在原生和React Native间通信(RN调用原生)
一.从React Native中调用原生方法(原生模块) 原生模块是JS中也可以使用的Objective-C类.一般来说这样的每一个模块的实例都是在每一次通过JS bridge通信时创建的.他们可以导 ...
随机推荐
- 用oracle自带的ssh脚本配置互信
./sshUserSetup.sh -user 用户名 -hosts "主机名1 主机名2 主机名3 ..." -advanced -noPromptPassphrase 这个 ...
- IPhone手机常用的一些连
1.查看固件可下载链接. ipsw.me 2.查看手机型号(是global还是GSM). https://ipsw.me/device-finder 3.系统降级链接. https://jingyan ...
- CentOS 7 配置nginx并默认强制使用https对http进行跳转
1.安装nginx yum install nginx 2.启动nginx服务 service nginx start 3.开启防火墙80端口,云服务器和本地虚拟服务器各有不同,不再赘述. 4.访问你 ...
- MACE移植要求
MACE支持Tensorflow的depth_to_space和space_to_depth,以及strided_slice算子. 其中depth_to_space可以用来无平滑地进行上采样. spa ...
- PhotoShop常用的功能汇总
1.将图层变为"智能对象"后如何调整大小? 答: ctrl + T 2.如何对文字添加投影? 答: 点击文字图层,“图层”->"图层样式"->&qu ...
- idea crack
ThisCrackLicenseId-{ “licenseId”:”11011”, “licenseeName”:”Wechat”, “assigneeName”:”tree-deep-see-dee ...
- Linux中安装tomcat后,window中访问不到tomcat的欢迎界面问题
首先,可以通过xftp把下载的tomcat的tar.gz包传输到Linux中. 然后进行解压,tar -zxvf tomcat的压缩包名称(可以使用tab键快速补齐) 解压后,可以使用修改/con ...
- 微信小程序实战练习(仿五洲到家微信版)
github地址(欢迎star):https://github.com/xiaobinwu/dj 版本:0.15.152900(暂未升级原因:升级后需要图片无法本地引用,必须使用image或是远程路径 ...
- laravel使用 面向对象的方式绑定多对多的关系
创建model文件,并且一起创建migration文件: php artisan make:model Habit -m 创建多对多的中间表的方法: php artisan make:migr ...
- JS中的作用域(一)-详谈
本篇文章在于详细解读JavaScript的作用域,从底层原理来解释一些常见的问题,例如变量提升.隐式创建变量等问题,在和大家一起交流进步的同时,也算对自己知识掌握的记录,方便以后复习 首先,直接捡干的 ...