iOS React Native 混合开发集成React Native
/**
-
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 (
iOS 原生 RN混合开发!
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
welcome: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
},
});
AppRegistry.registerComponent(‘RNHybrid’, () => RNHybrid);
-
Cocospod安装React Native
既然大家都来看RN了。cocospod就不用讲了吧。
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
moduleN 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ame:@“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