说明:本记录依据,并根据自己实践整理而成
大体步骤如下:
示例程序采用,下面是尚未植入 RN 时候的页面
React Native 的植入过程中需要 React 和 React Native 两个 node 依赖包。
package.json
具体的依赖包会记录在
文件中,如果项目中没有的自己创建吧(推荐使用 Sublime Text)
- package.json
对于一个典型的 RN 项目来说,一般
和
- package.json
等文件会放在项目的根目录下。而 iOS 相关的源代码会放在一个名为
- index.ios.js
的子目录中,这里同样放着 Xcode 项目文件(
- ios/
)
- .xcodeproj
下面是我的
示例
- package.json
示例中的
字段没有太大意义(除非你要把你的项目发布到 npm 仓库)。
- version
中是用于启动
- scripts
服务的命令。
- packager
中的 react 和 react-native 的版本取决于你的具体需求。一般来说我们推荐使用最新版本。你可以使用
- dependencies
和
- npm info react
来查看当前的最新版本。另外,react-native 对 react 的版本有严格要求,高于或低于某个范围都不可以。本文无法在这里列出所有 react native 和对应的 react 版本要求,只能提醒读者先尝试执行
- npm info react-native
,然后注意观察安装过程中的报错信息,例如
- npm install
,然后根据这样的提示,执行
- require react@某.某.某版本, but none was installed
。
- npm i -S react@某.某.某版本
- {
- "name": "NumberTileGame",
- "version": "0.0.1",
- "private": true,
- "scripts": {
- "start": "node node_modules/react-native/local-cli/cli.js start"
- },
- "dependencies": {
- "react": "^15.4.2",
- "react-native": "0.42"
- }
- }
- 我集成时候的最新版为15.4.2 和0.42,但是这个更新很快,你做的时候可能已经是新版了,
使用 npm(node 包管理器,Node package manager)来安装 React 和 React Native 模块。这些模块会被安装到项目根目录下的
目录中。 在包含有 package.json 文件的目录(一般也就是项目根目录)中运行下列命令来安装:
- node_modules/
- $ npm install
React Native 框架整体是作为 node 模块安装到项目中的。下一步我们需要在 CocoaPods 的 Podfile 中指定我们所需要使用的组件。
在你开始把 React Native 植入到你的应用中之前,首先要决定具体整合的是 React Native 框架中的哪些部分。而这就是 subspec 要做的工作。在创建 Podfile 文件的时候,需要指定具体安装哪些 React Native 的依赖库。所指定的每一个库就称为一个 subspec。
可用的 subspec 都列在 node_modules/react-native/React.podspec 中,基本都是按其功能命名的。一般来说你首先需要添加 Core,这一 subspec 包含了必须的 AppRegistry、StyleSheet、View 以及其他的一些 React Native 核心库。如果你想使用 React Native 的 Text 库(即组件),那就需要添加 RCTText 的 subspec。同理,Image 需要加入 RCTImage,等等。
在 React 和 React Native 模块成功安装到 node_modules 目录之后,你就可以开始创建 Podfile 以便选择所需的组件安装到应用中。
创建 Podfile 的最简单的方式就是在 iOS 原生代码所在的目录中使用 CocoaPods 的 init 命令:(在 Xcode 项目目录中)
或者
- $ pod init
- $ touch Podfile
Podfile 会创建在执行命令的目录中。你需要调整其内容以满足你的植入需求。下面是我调整后的 Podfile 的内容【】:
- # target的名字一般与你的项目名字相同
- platform :ios, '9.0'
- target 'NumberTileGame' do
- # 'node_modules'目录一般位于根目录中
- # 但是如果你的结构不同,那你就要根据实际路径修改下面的`:path`
- pod 'React', :path => '../node_modules/react-native', :subspecs => [
- 'Core',
- 'RCTText',
- 'RCTNetwork',
- 'RCTwebSocket', # 这个模块是用于调试功能的
- # 在这里继续添加你所需要的模块
- ]
- # 如果你的RN版本 >= 0.42.0,请加入下面这行
- pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
- end
Podfile 写完了,现在就可以安装 React Native 的 Pod 包了:
- $ pod install
然后你应该可以看到类似下面的输出 (译注:同样由于众所周知的网络原因,pod install 的过程在国内非常不顺利,请自行配备稳定的 FQ 工具,或是尝试一些镜像源):
- Analyzing dependencies
- Fetching podspec for `React` from `../node_modules/react-native`
- Downloading dependencies
- Installing React (0.26.0)
- Generating Pods project
- Integrating client project
- Sending stats
- Pod installation complete! There are 3 dependencies from the Podfile and 1 total pod installed.
现在我们已经准备好了所有依赖,可以开始着手修改原生代码来把 React Native 真正植入到应用中了。在我们的 2048 示例中,首先尝试添加一个显示有 "High Score"(得分排行榜)的 React Native 页面。
React Native 组件
我们首先要写的是 "High Score"(得分排行榜)的 JavaScript 端的代码。
创建一个 index.ios.js 文件
首先创建一个空的
文件。一般来说我们把它放置在项目根目录下。
- index.ios.js
是 React Native 应用在 iOS 上的入口文件。而且它是不可或缺的!它可以是个很简单的文件,简单到可以只包含一行
- index.ios.js
导入语句。本教程中为了简单示范,把全部的代码都写到了
- require/import
里(当然实际开发中我们并不推荐这样做)。
- index.ios.js
添加你自己的 React Native 代码
在 index.ios.js 中添加你自己的组件。这里我们只是简单的添加一个组件,然后用一个带有样式的组件把它包起来。
- 'use strict';
- import React from 'react';
- import {
- AppRegistry,
- StyleSheet,
- Text,
- View
- }
- from 'react-native';
- class RNHighScores extends React.Component {
- render() {
- var contents = this.props["scores"].map(score = ><Text key = {
- score.name
- } > {
- score.name
- }: {
- score.value
- } {
- "\n"
- } < /Text>
- );
- return (
- <View style={styles.container}>
- <Text style={styles.highScoresTitle}>
- 2048 High Scores!
- </Text > <Text style = {
- styles.scores
- } > {
- contents
- } < /Text>
- </View > );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#FFFFFF',
- },
- highScoresTitle: {
- fontSize: 20,
- textAlign: 'center',
- margin: 10,
- },
- scores: {
- textAlign: 'center',
- color: '#333333',
- marginBottom: 5,
- },
- });
- // 整体js模块的名称
- AppRegistry.registerComponent('RNHighScores', () = >RNHighScores);
是整体 js 模块(即你所有的 js 代码)的名称。你在 iOS 原生代码中添加 React Native 视图时会用到这个名称。
- RNHighScores
现在我们已经在
中创建了 React Native 组件,下一步就是把这个组件添加给一个新的或已有的 ViewController。
- index.ios.js
简单起见:直接通过项目 StoryBoard 来创建一个按钮,并添加点击事件到 ViewController 了中。
首先导入 RCTRootView 的头文件。
【这块和中文网上有出入,中文网导入有误】
- #import <React/RCTRootView.h>
这里我们在 btn 的点击方法中添加如下代码
- - (IBAction)highScoreButtonPressed:(id)sender {
- NSLog(@"High Score Button Pressed");
- NSURL *jsCodeLocation = [NSURL
- URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
- RCTRootView *rootView =
- [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
- moduleName : @"RNHighScores"
- initialProperties :
- @{
- @"scores" : @[
- @{
- @"name" : @"Alex",
- @"value": @"42"
- },
- @{
- @"name" : @"Joel",
- @"value": @"10"
- }
- ]
- }
- launchOptions : nil];
- UIViewController *vc = [[UIViewController alloc] init];
- vc.view = rootView;
- [self presentViewController:vc animated:YES completion:nil];
- }
现在基本的准备工作已经做完了,可以开始准备测试了。
修改 App Transport Security
苹果默认不允许 app 访问不安全的 http 连接。这里我们通过在 plist 文件中添加如下 key 即可解决
- <key>
- NSAppTransportSecurity
- </key>
- <dict>
- <key>
- NSExceptionDomains
- </key>
- <dict>
- <key>
- localhost
- </key>
- <dict>
- <key>
- NSTemporaryExceptionAllowsInsecureHTTPLoads
- </key>
- <true/>
- </dict>
- </dict>
- </dict>
运行 Packager
- From the root of your project, where the `node_modules` directory is located.
- $ npm start
运行应用
如果你使用的是 Xcode,那么照常编译和运行应用即可。如果你没有使用 Xcode(但是你仍然必须安装 Xcode),则可以在命令行中使用以下命令来运行应用:
- 在项目的根目录中执行:
- $ react-native run-ios
运行效果
这个小程序中,你运行了之后点击
会出现如下页面,表示集成成功了
- High Score
至此,就可以做功能的开发了。
来源: http://www.cnblogs.com/xiaoyouPrince/p/6668533.html