iOS React Native 混合开发集成React Native
来源:互联网 发布:北京节能环保中心 知乎 编辑:程序博客网 时间:2024/06/08 20:25
序:
有时候我们并不是需要全部使用React Native,我们想和原生混合开发,那我们应该怎么办呢。
先看一下我集成完之后的项目目录:
1、新建一个文件夹如目录中的RN,这个文件夹用于存放React Native相关内容
2、新建一个package.json用于安装node_modules。package.json内容如下:
{
"name": "RNHybrid", //记得修改项目的名字
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.0"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "1.9.2",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}
3、cd 你的项目路径,然后执行 nmp install。如下图:
执行完上面的命令之后,打开你的项目目录下,你就会发现node_modules都下载到你新建的文件夹中了,如图:
4、在新建的目录下新建index.ios.js,把之前React Native的例子拷过来就可以,记得改下modules的名字
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';export default class RNHybrid extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> iOS 原生 RN混合开发! </Text> </View> ); }}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, },});AppRegistry.registerComponent('RNHybrid', () => RNHybrid);
1、podfile我们要加入的内容
路径填写你存放node_modules的路径即可。
pod 'Yoga', :path => ‘./RN/node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => ‘./RN/node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork’,
'RCTWebSocket',
]
因为Core依赖于Yoga所以要添加一下,至于项目中需要什么组件以后可以在subspecs依次添加。
2、然后pod install就行了,比较慢,你可以撸一把了。
3、成功之后,我们来用一下吧,我们可以在原生项目中加入RN界面试试。
NSURL *jsCodeLocation;
jsCodeLocation = [NSURLURLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation
moduleName:@"RNHybrid"
initialProperties:nil
launchOptions:nil];
rootView.frame =CGRectMake(0,0,[UIScreenmainScreen].bounds.size.width, [UIScreenmainScreen].bounds.size.height);
[self.viewaddSubview:rootView];
下面代码大家有疑惑的估计就是这个url从哪来的,下面当你启动的时候,会告诉你。
4、启动RN
cd 到你上面新建的文件夹里,如我项目中的RN文件夹,然后执行react-native start
这时候,你可以看出来,服务器启动的端口是8081,也就知道了上面那个url
5、这时候你启动的时候如果看到下面的画面:
修改ATS就可以了,会iOS的基本都会,不啰嗦了。
6、在运行下试试吧,结果如图:
- iOS React Native 混合开发集成React Native
- [React Native混合开发]React Native for iOS之应用
- React Native混合开发1
- react-native + androidstudio 混合开发
- ios原生集成React Native
- ios集成react-native步骤
- React-Native-iOS推送集成
- [React Native混合开发]React Native中的Flexbox布局
- 【react-native-0.31-iOS】iOS集成react-native(01)
- [React Native混合开发]React Native for iOS之环境搭建
- [React Native混合开发]React Native for iOS之创建第一个案例
- [React Native混合开发]React Native for iOS之代码结构
- [React Native混合开发]React Native for iOS之CSS和UI布局
- [React Native混合开发]React Native for iOS之布局实战
- [React Native混合开发]React Native for iOS之布局实战(二)
- [React Native混合开发]React Native for iOS之UI组件
- [React Native混合开发]React Native for iOS之动手写组件
- [React Native混合开发]React Native for iOS之环境搭建
- [leetcode]611. Valid Triangle Number
- Coverage algorithm for cleaning a room with limited area for each cleaning cycle
- 剑指Offer----链表中倒数第k个节点
- 1050: [HAOI2006]旅行comf
- 【maven】ITOO POM文件依赖关系
- iOS React Native 混合开发集成React Native
- GitHub+Hexo 搭建个人网站详细教程
- 【并查集】poj 2524 Ubiquitous Religions
- AVL树
- Oracle查询练习02
- SQL Server中,添加数据库到AlwaysOn高可用性组条件
- 使用JWT和Spring Security保护REST API
- Tengine虚拟主机配置(域名)
- Aizu