首页 > 代码库 > 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。

喜欢本文记得 “顶” 一下哦!

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

    React Native 技术 开发跨平台 Native App 初探