React Native 技术 开发跨平台 Native App 初探
|
转载请注明出处：http://www.52php.cn/article/p-nednctib-mm.html 我们已经了解像 Titanium 和 PhoneGap 等框架，它们能让开发者用 Web 技术构建移动应用。这是一个优势，支持开发者使用原先网络和移动开发的相关技术。仅如此，相同的代码库经过小幅度的修改便能适用多个平台——这就是著名的一次编写，到处运行。然而，当涉及到构建应用的性能时，这些框架的缺点显露无遗，尽管它们有一些吸引力，但却一直更适用于构建原生应用。React Native 却与众不同。像 PhoneGap 这样的框架是将网页内容包装成 WebView，导致 UI 元素并没有原生的感觉，而 React Native 则使用原生 iOS 或 Android 组件支持的 JavaScript 组件，所以你构建的应用是完全原生的。
本篇就是使用 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’. 解决方案： 这个是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’ 解决方案： $ sudo npm install 3. ERROR Error watching file for changes: EMFILEERROR 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.Navigationreact-native-router-flux：一款很火的导航组件。 2.ViewPagerreact-native-swiper：一款轮番滑动的组件。 3.ListView&ScrollViewreact-native-refreshable-listview：下拉刷新组件。 4.Text&Rich Contentreact-native-htmlview：HTML显示组件，渲染HTML text 。 5.弹框react-native-easy-toast：一款用于React Native上消息提示弹框组件，使用方便，支持定义Toast，支持iOS,Android。 6.Material Designmrn：Material Design组件库。 7.TabLayoutreact-native-scrollable-tab-view：一款用于React Native上TabLayout组件。 9.React Native开源框架&库NativeBase：一款融合了ES6用于在React Native上创建创建高质量的Android&iOS APP的框架。 10.React Native开源APPGitHubPopular：基于React Native的查看、阅读、收藏GitHub上 最受欢迎的开源项目的APP，不仅如此，它还是一款GitHub Trending的客户端。 喜欢本文记得 “顶” 一下哦！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |