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通信时创建的.他们可以导 ...
随机推荐
- cookie与sessionStorage机制
sessionStorage.localStorage和cookie的区别 共同点:都是保存在浏览器端.且同源的 区别: 1.cookie数据始终在同源的http请求中携带(即使不需要),即cooki ...
- 【PAT】反转链表
PAT 乙级 1025 给定一个常数 K 以及一个单链表 L,请编写程序将 L 中每 K 个结点反转.例如:给定 L 为 1 → 2 → 3 → 4 → 5 → 6,K 为 3,则输出应该为 3 → ...
- rpm -ivh 安装与 rpm -U安装解决问题一例
[root@localhost server3.10.12]# rpm -ivh krb5-libs-1.15.1-18.el7.x86_64.rpm警告:krb5-libs-1.15.1-18.e ...
- win10php环境变量配置(xampp环境)
我的电脑--属性(右键)--高级系统设置--环境变量--系统变量--Path--编辑 新建两条变量: 一个是xampp文件下的php文件,例如 C:\xampp\php 一个是xampp文件下的php ...
- 使用PHP添加圆形头像
首先来看一下PHP怎样生成一个圆形透明的图片 function circle($url){ $w = 430; $h=430; // original size $path = dirname(__F ...
- java-猜数字
package com.jijy.circle; import java.util.Scanner; import java.util.Random; public class demo5 { pub ...
- http协议与https协议的前世今生
一.Http与Https的区别: HTTP 的URL 以http:// 开头,而HTTPS 的URL 以https:// 开头 HTTP 是不安全的,而 HTTPS 是安全的 HTTP 标准端口是80 ...
- sciense
I hate the word "networking." It must be one of the most overused words in the English lan ...
- 聚类--K均值算法
import numpy as np from sklearn.datasets import load_iris iris = load_iris() x = iris.data[:,1] y = ...
- Python之字符串方法
def capitalize(self): # 第一个字符变大写 def center(self, width, fillchar=None): # 内容居中,两端可指定内容填充 def count( ...