首页 > 代码库 > React Native 技术 开发跨平台 Native App 初探
React Native 技术 开发跨平台 Native App 初探
转载请注明出处:http://blog.csdn.net/smartbetter/article/details/64190798
我们已经了解像 Titanium 和 PhoneGap 等框架,它们能让开发者用 Web 技术构建移动应用。这是一个优势,支持开发者使用原先网络和移动开发的相关技术。仅如此,相同的代码库经过小幅度的修改便能适用多个平台——这就是著名的一次编写,到处运行。然而,当涉及到构建应用的性能时,这些框架的缺点显露无遗,尽管它们有一些吸引力,但却一直更适用于构建原生应用。React Native 却与众不同。像 PhoneGap 这样的框架是将网页内容包装成 WebView,导致 UI 元素并没有原生的感觉,而 React Native 则使用原生 iOS 或 Android 组件支持的 JavaScript 组件,所以你构建的应用是完全原生的。
- | Native App(原生) | Hybrid App(混合模式App,原生+Html5) | Web App(Html5) |
---|---|---|---|
开发语言 | Object-C/swift/Java | Object-C/swift/Java + Html5 | Html5 |
页面存放位置 | 本地 | 受限于UIwebview/WebView | 服务器 |
照相机/系统通知 | 支持 | 支持 | 不支持 |
定位 | 支持 | 支持 | 支持 |
网络请求 | 支持离线 | 大部分依赖于网络 | 大部分依赖于网络 |
图像渲染 | 本地API渲染 | 混合 | Html5,Canvas,CSS |
性能 | 快 | 慢 | 慢 |
原生界面 | 原生 | 模仿 | 模仿 |
发布 | App Store | App Store | Web |
本篇就是使用 React Native 技术开发跨平台 Native App,React Native是FaceBook开源的一套用于开发移动端跨平台App的技术框架。React Native并不是在Webkit浏览器上运行Html5与js,而是自己构建了一个用于渲染js的一个引擎,可以说性能比Html+WebView的方式高出了很多。另外,React Native还支持动态更新。
1.搭建React Native开发环境
本篇以Mac系统为例进行搭建,在Mac平台开发React Native需要安装以下环境和工具:
1)Node.js(做React Native开发会经常和Node.js打交道,例如用npm start命令启动React Native的启动器;用npm install 安装项目
所依赖的第三方组件;用npm publish往npm上发布一些组件等)
2)React Native Command Line Tools
3)Android Studio/XCode
在Mac上Node.js可以通过Homebrew(Homebrew安装方法请自行百度)进行安装:
brew install node // 安装Node.js,安装完成后可以通过 npm -v 查看版本信息
下来安装React Native命令行工具:
npm install -g react-native-cli // 安装完成后可以通过 react-native --help 来查看它所支持的所有命令
然后安装 Android Studio/XCode 就可以了。
另外为了提高npm的下载速度,可以使用淘宝的npm镜像,Mac平台设置npm镜像步骤如下:
$ open . // 在终端中输入,打开用户的根目录
然后找到.npmrc文件(如果没有请新建该文件),编辑文件内容为:
registry = https://registry.npm.taobao.org
2.运行React Native项目
首先初始化一个项目:
$ cd /Desktop/ReactNative
$ react-native init FirstApp
初始化完成后我们看下目录结构:
__tests__ 存放着js代码测试的一个项目
android 存放着React Native的android部分的项目
ios 存放着React Native的ios部分的项目
node_modules 存放着项目所依赖的一些npm包,通过npm install安装的包都会放在这个目录下。
package.json npm的一些配置文件
下来我们看如何运行android和ios项目:
1.通过命令行运行:
$ cd FirstApp // 切换到项目根目录
$ react-native run-android // 此时还会弹出React Native的包管理器(本地服务器),是为了负责向React Native应用同步代码
$ react-native run-ios
如果你使用的是真机,那么还需要配置一下 Debug server host & port for device,在直机上打开应用并摇动一下手机,会弹出框如图(虚拟机可通过command+D打开):
点 Dev Settings 选项 打开设置窗口,再点击 Debug server host & port for device 选项,输入计算机上的ip地址和端口号(默认8081)。最后点击确定后,关闭窗口,重新打开应用即可。
2.通过开发工具运行:
android项目使用Android Studio打开FirstApp/android运行即可,ios项目则使用XCode打开FirstApp/ios/FirstApp.xcodeproj运行即可。最后React Native的开发工具推荐使用 WebStorm。
3.运行官方Examples项目
React Native 的开源地址为:https://github.com/facebook/react-native
$ git clone https://github.com/facebook/react-native.git
然后在react-native目录新建local.properties文件,配置本地ndk和sdk的目录地址:
ndk.dir=/Users/guochao/Library/Android/sdk/android-ndk-r10e
sdk.dir=/Users/guochao/Library/Android/sdk
执行:
$ cd react-native && npm install // 添加了Node_Modules模块(其中包含了react-native核心库)
$ ./gradlew :Examples:UIExplorer:android:app:installDebug // 组建和编译Android项目
$ ./packager/packager.sh // 启动npm包管理器(服务器)
到此项目就可以运行到手机上了。
4.运行官方Examples项目遇到的坑
对比ios,编译运行android项目就显得复杂些了,下面总结一下android项目编译和启动npm包管理器过程中可能出现的问题和解决方案:
1.Error: Execution failed for task ‘:ReactAndroid:buildReactNdkLib’
Error: Execution failed for task ‘:ReactAndroid:buildReactNdkLib’.
Process ‘command ‘/Users/用户名/Library/Android/sdk/ndk-bundle/ndk-build” finished with non-zero exit value 2
解决方案:
这个是ndk的版本问题,使用android-ndk-r10e后正常。
下载链接:MacOS:https://dl.google.com/android/repository/android-ndk-r10e-darwin-x86_64.zip
Windows:https://dl.google.com/android/repository/android-ndk-r10e-windows-x86_64.zip
Linux:https://dl.google.com/android/repository/android-ndk-r10e-linux-x86_64.zip
下载完成后将对应目录下ndk文件夹替换即可。
2.Error: Cannot find module ‘graceful-fs’
Error: Cannot find module ‘graceful-fs’
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.
解决方案:
$ sudo npm install
3. ERROR Error watching file for changes: EMFILE
ERROR Error watching file for changes: EMFILE {“code”:”EMFILE”,”errno”:”EMFILE”,”syscall”:”Error watching file for changes:”,”filename”:null}
解决方案:
$ brew install watchman // 重新安装watchman
5.使用WebStorm开发React Native
这里推荐使用WebStorm创建React Native项目(比前面说的创建方式方便了好多,WebStorm还是强大的,注意的是 项目/android/下 local.properties 还是需要手动添加的):
目录结构如下:
项目运行也十分简单,选择android/ios,然后点击 run 按钮即可运行到手机上。
6.React Native的组件
React组件让你将UI分割成独立的/可重用的一些碎片或部分,这些部分都是相互独立的,例如下面的Header、Tabs、Item、TabBar等。
1.创建组件的三种方式
1)ES6创建组件的方式(推荐)
export default class HelloComponent extends Component {
// ReactNative组件必不可少的方法,render()方法代表UI部分渲染的界面。
// 心得:不要在render()函数中做复杂的操作,更不要进行网络请求,数据库读写,I/O等操作。
render() {
return <Text style={{fontSize:20, backgroundColor:‘red‘}}>Hello.{this.props.name}</Text>;
}
}
2)ES5创建组件的方式
var HelloComponent = React.createClass( {
render() {
return <Text style={{fontSize:20, backgroundColor:‘red‘}}>Hello</Text>;
}
})
module.exports = HelloComponent; // 导出
3)函数式定义的无状态组件(不能使用this)
function HelloComponent(props) {
return <Text style={{fontSize:20, backgroundColor:‘red‘}}>Hello.{props.name}</Text>;
}
module.exports = HelloComponent;
下来我们就可以调用创建下的组件了:
import HelloComponent from ‘./HelloComponent‘;
export default class setup extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<HelloComponent
name="zhangsan"
/>
</View>
);
}
}
我们运行到手机上,可以看到如下的样子:
Demo已经放在了GitHub:https://github.com/smartbetter/ReactNativeDemo
7.React Native组件的生命周期
8.React Native开源组件
1.Navigation
react-native-router-flux:一款很火的导航组件。
react-native-navbar:一款用于React Native上的可定制的导航条。
react-native-tab-navigator:一款兼容Android、iOS的TabBar组件。
react-native-drawer-layout:抽屉组件。
react-native-drawer:另一款抽屉组件。
2.ViewPager
react-native-swiper:一款轮番滑动的组件。
react-native-looped-carousel:滚动轮播组件。
3.ListView&ScrollView
react-native-refreshable-listview:下拉刷新组件。
react-native-swipe-list-view:滑动删除组件。
react-native-swipeout:iOS样式的划动删除组件。
react-native-sortable-listview:拖拽排序组件。
react-native-draggablelist:拖排序组件。
react-native-SortableList:拖拽排序组件。
4.Text&Rich Content
react-native-htmlview:HTML显示组件,渲染HTML text 。
5.弹框
react-native-easy-toast:一款用于React Native上消息提示弹框组件,使用方便,支持定义Toast,支持iOS,Android。
react-native-modal:模态框,作者已经将该组件添加到React Native,所以开发者可以直接使用Modal;
react-native-popover:一款类似Android popupwindow的弹出框组件。
6.Material Design
mrn:Material Design组件库。
react-native-material-design:一款用于React Native上的材料设计UI组件库。
7.TabLayout
react-native-scrollable-tab-view:一款用于React Native上TabLayout组件。
9.React Native开源框架&库
NativeBase:一款融合了ES6用于在React Native上创建创建高质量的Android&iOS APP的框架。
tcomb-form-native:强大的表单处理控件,支持 JSON 模式,可插拔的外观和感觉。
RNShareSDK:一款基于原生平台ShareSDK的ReactNative插件,方便RN开发者集成各大社交平台的分享和授权功能。
10.React Native开源APP
GitHubPopular:基于React Native的查看、阅读、收藏GitHub上 最受欢迎的开源项目的APP,不仅如此,它还是一款GitHub Trending的客户端。
React Native官方Demo:React Native官方Demo,汇集了各种组件,API的使用Examples。
Facebook F8 App :基于React Native 的2016 F8大会APP。
HackerNews-React-Native:Hacker 新闻客户端。
react-native-nw-react-calculator:基于React Native的计算器,iOS/Android、Web、桌面多端。
react-native-dribbble-app:基于React Native的Dribbble客户端。
noder-react-native:Noder-cnodejs客户端。
ZhiHuDaily-React-Native:知乎日报Android版。
react-native-gitfeed:一款基于React Native的GitHub客户端。
FinanceReactNative:Finance - 股票报价app。
React-Native-Gank:Gank.io客户端。
leanote-ios-rnLeanote:Leanote for iOS(云笔记)。
shopping-react-native :购物app-界面。
react-native-nba-app:This is why we play。
react-native-gitosc:使用React Native重写的OSChina的Git@OSC客户端。
reading:iReading App。
喜欢本文记得 “顶” 一下哦!
React Native 技术 开发跨平台 Native App 初探