开始学习react-native

一、简介

react-native 是facebook推出的基于JavaScript和 react 用来开发iOS、Android应用的开发框架。

learn once, write anywhere

react native 跟以往的 Hybrid App 十分不同,Hybrid App 最后还是运行在WebView上面,所以Hybrid App的性能问题也就是WebView的性能问题,而总所周知Android上面的WebView参差不齐,所以Hybrid App在Android上面,笔者曾经做过离线的Hybrid App的方案(有点类似于腾讯的AK),效率上比普通的在线Hybrid App 稍

而react natvie最终被翻译为原生代码,虽然在将js代码翻译为原生代码时耗费一些性能,但性能是远远高于Hybrid App的。

方案 优点 缺点
Web App 1、开发简单,效率快
2、用户能访问到实时的内容
1、严重依赖于网络,加载速度远远低于原生
2、到处是白屏,处处亮瞎,用户需要等待较长时间
3、可能被网络运营商劫持
4、运行速度不如原生,用户体验糟蹋
5、耗费用户更多的流量
Hybrid App 1、Web页面可以拥有原生系统的一些功能,如获取地理位置,访问照片等
2、可能被网络运营商劫持
1、体验不如原生
2、可能被网络运营商劫持
react native 1、运行时解析为原生代码
2、learn once,write anywhere
3、react native 支持多个平台开发:iOS、Android、UWP等 4、因为不是web页面,不存在被运营商劫持
1、学习成本较高
2、将js代码翻译为原生代码带来一些性能损耗

那么接下来我们开始搭建react native的开发环境。

二、搭建开发环境

由于iOS应用需要在Mac上开发,所以开发环境推荐使用Mac。在Windows上我们可以进行Android react-native的开发,参考教程

1、安装Homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2、安装node

brew install node

3、安装react-native-cli

npm install -g react-native-cli

4、安装Watchman 以及 Flow

brew install watchman
brew install flow

5、安装XcodeAndroid Studio

三、IDE选择

1、Nuclide

react native 官方推荐的编辑器是Nuclide ,拥有较为强大的语法补全功能,Nuclide实际上是Atom的一个react native插件。

2、VSCode

vscode是微软推出的跨平台的编辑器,其智能提示相当出色。微软提供了react natvie的扩展插件,也是一款非常棒的react native ide。

笔者之前是Windows Phone 开发者,所以对Visual Studio Code 相对偏爱一些,实际上发现vscode确实比nuclide好用些,特别是其智能提示以及调试功能。使用vscode开发react natvie 会在下一小节中细讲。

VSCode 有一个bug是不支持在js文件中给类定义属性,会报Error错误,但实际上可以正常运行。如下图所示:

3、Sublime Text 2

Sublime Text 2是一款备受程序员喜爱的文本编辑器,以丰富的插件著称。一些开发react native 的插件:

四、一个小Demo

利用react native命令行工具创建react-native项目,创建项目较为耗时,因为需要将一些nodejs的package下载下来。

cd ~/react-native-projects
react-native init demo

打开项目文件夹,来查看一下react-native init命令创建了哪些文件:

/index.ios.js         ===》 iOS程序入口
/ios                 ===》 iOS原生项目文件夹
index.android.js     ===》 android入口
/android            ===》 android原生项目文件夹
/node_modules        ===》 node 模块包
package.json        ===》 程序包配置文件,包括依赖react、react-native的版本信息,以及启动命令

react-native通过 xx.ios.js (xx.android.js)文件命名的方式来自动

打开vscode,添加demo文件夹

切换到调试窗口,会发现设置图片上有一个红点,点击设置按钮可以配置当前的开发环境,选择React Natvie作为当前vscode的开发环境,然后选择debug ios,点击前面的调试按钮

就可以开始调试了,默认项目的运行效果如下。

4.1 基础知识

来看下index.ios.js中的代码,我们分成四个段分别解释:

4.1.1 申明引用
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

importnodejs里面的语法,意思就是添加引用,类似于#incule#import

4.1.2 定义组件
class demo 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>
);
}
}

使用关键字class定义类,并且用关键字extends集成自 Component类,Component类是ReactJs中的一个类,代表一个组件。然后复写render方法,该方法告诉引擎如何渲染这个组件。 方法返回了一种奇怪的写法:

<View>
{...}
</View>

直接返回了类似于HTML的标记语段,这是一种叫做JSX 的语法,React用这种语法来定义了可视化树。

View类似于iOS中的UIView,是一个容器组件,内部可以内嵌多个组件,Text等同于iOS中的UILabel控件,用来显示文本,通过设置组件的style属性来指定组件的样式。

4.1.3 定义样式

下面的代码类似CSS的写法,是给View申明样式,使用 const关键字申明一个常量,StyleSheet.create

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,
},
});
4.1.4 注册组件
AppRegistry.registerComponent('demo', () => demo);

这句话的意思就是将组件demo注册到应用注册表中,原生应用就可以通过runApplication(appKey, appParameters)运行react native的应用了。 AppRegistry拥有的静态方法如下:

registerConfig(config)
registerComponent(appKey, getComponentFunc)
registerRunnable(appKey, func)
getAppKeys()
runApplication(appKey, appParameters)
unmountApplicationComponentAtRootTag(rootTag)

4.2 部署到真机

4.2.1 在iPhone上调试

在iPhone上调试相对比较简单,打开ios目录下的xcode项目,将AppDelegate.m中的 localhost 修改为mac本机的ip地址像往常调试xcode项目就可以了。

注意到调试的时候,实际上启动了一个本地的Server,然后手机连接那个。如果我们把这个窗口关掉后,启动程序后会报错。那么如何才能不用server,react-native 提供了离线包的模式,即离线包模式。将应用部署到手机的时候xcode会生成一个jsbundle.js文件做法也相当简单,将jsLocation=...这一行打开注释即可。

使用如下的命令可以在mac上查看当前端口的占用情况,在部署到真机的时候如果遇到

netstat -an | grep 8081
4.2.2 在Android设备上调试

将android设备连接到mac,通过 adb devices命令检查设备连接情况,如果出现

adb command not found

我们需要将adb命令所在的路径添加到系统PATH中:

echo 'export PATH=$PATH:/Users/xushuifeng/Library/Android/sdk/platform-tools/' >> ~/.bash_profile
source ~/.bash_profile

关于iOS与Android之间的差异,在后续的篇章中会详解讲解。

五、React Native资源

facebook提供了用于展示UI控件的一个示例UIExplorer,通过这个示例我们可以了解了那些UI组件的具体使用方法以及展示效果。

这里列出一些react native常用的资料。

六、what’s next ?

会详解React Native的重要知识点,并且以一个具体的项目来演示react native的实战开发。