React Native - Start

React Native

  React Native是Facebook在React.js Conf 2015大会上开源的基于JavaScript开发iOS和Android原生应用的框架。到目前为止,网上关于React Native的讨论和解读已经有很多,我在这里就不多说,主要说一下自己在使用过程中的一些经历。本文站在iOS开发角度并假设读者已具备使用React Native的硬件和软件环境
  React Native通信机制详解: 戳这里>>>Bang’s Blog
  如何评价React Native:戳这里>>>知乎

开始使用

新建项目

使用官方给出方式

  新建项目有多种方式,我们先看一下官方Demo给出的方式。

1
$ react-native init AwesomeProject

  命令执行完成以后我们可以看到项目目录下有三个文件和三个文件夹,如果只是要支持iOS项目的话,可以删掉index.android.js文件和android文件夹。使用Xcode打开iOS项目并运行,即可看到初始项目。通过修改index.ios.js文件使用command+R快捷键即可看到对应的改动。

使用CocoaPods 为原生项目添加React Native

  如果你已经有一个Xcode项目想要为其添加React Native模块,你可以使用CocoaPods引入React Native组件,在Podfile中添加下列内容:

1
2
3
4
5
6
7
8
$ 请将:path后面的内容修改为正确的路径。
pod 'React', :path => './node_modules/react-native', :subspecs => [
'RCTImage',
'RCTText',
'RCTWebSocket',
'你需要使用的组件',
...
]

  修改完成以后执行pod install命令。然后开始创建你的js代码。新建一个index.ios.js的文件。

1
touch index.ios.js

  并复制粘贴下面的初始代码,Hello World:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';
class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</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('AwesomeProject', () => AwesomeProject);

  在Xcode项目中创建下面代码,运行起来,就可以看到效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
// jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"AwesomeProject"
initialProperties:nil
launchOptions:launchOptions];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}

现有项目植入React Native

  上面两种方式简单介绍了一下React Native的使用方法,实际上大部分人的情况是已经有iOS的项目,想要在Project中植入React Native模块,而且做到Native模块和JS模块相互通信。我们就从下面的例子开始讲起。
  我们已经知道了一个支持React Native的项目包含了iOS项目文件,index.js文件,node_modules和一个叫做package.json的文件。为了使项目目录结构看起来清晰,我们先新建一个文件夹用来保存上面提到的四个文件。首先把已有的iOS项目,拷贝到此文件夹下。然后在此文件夹在创建package.json文件。

1
touch package.json

  编辑package.json文件,输入下面内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"name": "iOS项目名称",
"version": "版本号",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
}
,

"dependencies": {
"react": "^0.14.7",
"react-native": "^0.18.0",
"其他组件名":"^版本号"
}

}

  在此目录下创建一个文件夹,用来保存项目需要的JS文件,然后执行下面的命令:

1
$ npm install

  一段时间过后,我们就可以看到自动生成了node_modules这个文件夹,而且里面已经具备了我们需要使用React Native 组件。
  打开Xcode项目,在node_modules目录中找到react-native文件夹,里面就是我们需要使用的React的组件,首先将React文件夹内的React.xcodeproj文件拖拽进去我们的Xcode项目内。这个React.xcodeproj工程内是使用React Native的一些基础组件。然后返回上层目录,进入Libraries文件夹,按照上面的操作依次加入需要使用的xcodeproj项目组件。
  添加完成以后,打开Xcode项目,依次定位到TARGETS>Build Phases>Link Binary Libraries>目录,将我们需要使用的libRCTxxx.a添加进来。然后点击左上角的加号,选择New Run Script Phase,名称为Bundle React Native code and images,在script中输入下面代码:

1
../node_modules/react-native/packager/react-native-xcode.sh

  接下来选择TARGETS>Build Settings>Search Paths>Header Search Paths,依次加入下面的三条内容:
  注意:React目录后面的选项为[recursive]

1
2
3
$(inherited)
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include
$(SRCROOT)/../node_modules/react-native/React

  最后一步,选择TARGETS>Build Settings>Linking>Other Linkers Flags,输入”-ObjC”.然后在外面准备好你的index.ios.js和Appdelegate.m内相应的代码,Run起来,就可以开始开发啦。提醒:iOS9的用户不要忘记设置HTTPS到HTTP协议的支持噢!