您的位置：首页 > Web前端 > React

React Native集成到IOS原生项目

2017-06-02 12:36 543 查看
这里默认电脑上已经安装了cocoapods和React-Native，如果没有RN开发环境，可以点击这里按照步骤配置。

0、新建项目

首先，先使用xcode新建一个项目，然后在项目的根目录下新建一个文件夹，用于存放RN的组件库还有其他一些文件。这里假设新建一个名为 
RNComponent
的文件夹。目录结构为：



1、新建RN配置文件

准备妥当以后，我们在 
RNComponent
这个文件夹里就可以放置所有RN相关的文件。新建一个用户初始化RN的配置文件，是Json文件。命名为 
package.json
。



内容为：

{
"name": "RNApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.0",
"react-native-deprecated-custom-components": "^0.1.0",
"react-native-tab-navigator": "^0.3.3"
}
}


上述代码里的配置信息已经足够现在集成项目使用，如果需要了解其它配置信息的话，可以参考下方：

name
 是指RN项目的名字，这个和原生项目的名字保持一致即可

version
 是指项目版本号

description
 项目的描述

author
 开发者个人信息

private
 当设置为true时，npm不会发布这个package

dependencies
 指需要哪些依赖组件，并且指明版本号，这样用户安装时，会自动安装这些依赖组件

devDependencies
 是指开发或测试的依赖组件，正式打包的时候不会打包到最终的生产包中

scripts
 定义npm脚本命令，key值表示命令名，value值表示命令对应的脚本或者脚本路径

main
 工程生成的package主入口点，当在 node 中调用 require(‘{module name}’) 时会 require 到这个文件

repostitory
 如果我们这个工程是开源的，这个字段用来指明工程的仓库 URL 地址以及版本控制系统的类型，这可以方便其他开发者贡献代码

bugs
 使用者可以提交bugs的 URL 或者邮件地址

文章结尾放了一些 
package.json
的扩展内容，感兴趣的可以看看。

2、安装RN

编辑好 
package.json
以后，我们来安装RN。这里需要确定当前目录是否为刚才新建的目录，并且确定 
package.json
存在，然后，输入安装RN，在终端输入命令 
npm install




当出现下图，就说明安装成功，并且目录里多了一个 
node_modules
文件夹。如图：





3、设置podfile文件

安装完毕以后，我们切换到xcode项目根目录中，然后再终端输入 
pod init
命令，来生成podfile文件。如图：





4、使用pod管理依赖组件

生成 
podfile
文件以后，直接编辑，编辑信息如下：

pod 'Yoga',  :path => './RNComponent/node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => ‘./RNComponent/node_modules/react-native/', :subspecs => [
'Core',
'ART',
'RCTActionSheet',
'RCTAdSupport',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTLinkingIOS']


这里把所有组件全部做了依赖管理，所以在开发中，就需要根据实际需求来做对应的依赖。如果路径没有指定正确，就会报错，具体点击这里参考。

编辑好以后，直接在终端输入 
pod install
命令，安装依赖。出现下图时，就说明安装成功：



此时目录结构为：



5、新建RN项目js文件入口

接下来需要在 
RNComponent
文件夹中新建RN的js入口文件 
index.ios.js
,这里直接复制RN初始化时的文件，内容如下：

/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

import React, { Component } from 'react';
import {
AppRegistry,  //注册
StyleSheet,   //样式
Text,         //文本组件
View,          //视图组件
Image
} from 'react-native';

export default class RNApp extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
nethanhan
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>

</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
//注意这里的名字需要和项目名字一致
AppRegistry.registerComponent('RNApp', () => RNApp);


6、集成测试

完成所有工作以后，我们打开xcode项目，然后创建一个按钮，用于跳转到另外一个控制器，然后这个控制器直接把RN界面当成自己的view来展示。如图：



RN模块的类是 
RCTRootView
，实例化时需要传入相应的参数：



然后在项目的plist文件中添加允许http连接声明，代码如下：

<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>


接下来在终端中切换到刚才的 
RNCompoent
目录下，运行 
react-native start
命令，如图：



最后运行xcode项目，点击按钮，会跳转到RN界面的控制器里，就会出现RN的界面（第一次运行会慢一些），如图：



OK！ 至此，我们已经成功的把RN集成到IOS原生项目中。 如果有什么疑问，随时欢迎评论！

7、package.json扩展

我们在上方 
package.json
中只配置了一些常用的信息，还有一些其它的说明，可以点击这里查阅。因为是属于npm的知识点，所以在这里放上一个真实项目的 
package.json
的内容：

{
"name": "module-name",
"version": "10.3.1",
"description": "An example module to illustrate the usage of a package.json",
"author": "Your Name <you.name@example.org>",
"contributors": [{
"name": "Foo Bar",
"email": "foo.bar@example.com"
}],
"bin": {
"module-name": "./bin/module-name"
},
"scripts": {
"test": "vows --spec --isolate",
"start": "node index.js",
"predeploy": "echo im about to deploy",
"postdeploy": "echo ive deployed",
"prepublish": "coffee --bare --compile --output lib/foo src/foo/*.coffee"
},
"main": "lib/foo.js",
"repository": {
"type": "git",
"url": "https://github.com/nodejitsu/browsenpm.org"
},
"bugs": {
"url": "https://github.com/nodejitsu/browsenpm.org/issues"
},
"keywords": [
"nodejitsu",
"example",
"browsenpm"
],
"dependencies": {
"primus": "*",
"async": "~0.8.0",
"express": "4.2.x",
"winston": "git://github.com/flatiron/winston#master",
"bigpipe": "bigpipe/pagelet",
"plates": "https://github.com/flatiron/plates/tarball/master"
},
"devDependencies": {
"vows": "^0.7.0",
"assume": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
"pre-commit": "*"
},
"preferGlobal": true,
"private": true,
"publishConfig": {
"registry": "https://your-private-hosted-npm.registry.nodejitsu.com"
},
"subdomain": "foobar",
"analyze": true,
"license": "MIT"
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ios react-native 集成
相关文章推荐
新的分享
章节导航