React-Native for Android

前端之家收集整理的这篇文章主要介绍了React-Native for Android前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React-Native Android

既拥有Native的用户体验、又保留React的开发效率。

  尽管Native开发成本更高,但现阶段Native仍然是必须的,因为Web的用户体验仍无法超越Native:
  ① Native的原生控件有更好的体验;
  ② Native有更好的手势识别;
  ③ Native有更合适的线程模型,尽管Web Worker可以解决一部分问题,但如图像解码、文本渲染仍无法多线程渲染,这影响了Web的流畅性。
  ④ Native能实现更丰富细腻的动画效果,归根结底是现阶段Native具有更好的人机交互体验

天猫技术–关于React-Native

1.环境

  React Native只支持在OS X系统,React Native开发的app 要求客户端os >= Android 4.1 (API 16) 和>= iOS 7.0

1.1 工具

  • Homebrew
  • Nodejs
  • nvm
  • watchman
  • flow

1.2 SDK 环境要求

  • Android SDK Build-tools version 23.0.1
  • Android 6.0 (API 23)
  • Android Support Repository

1.3 Demo Hello World

  1. $ npm install -g react-native-cli
  2. $ react-native init AwesomeProject
  3. $ cd AwesomeProject/
  4. $ react-native run-android

  相应的会在目录AwesomeProject/android/app下创建Android Studio工程,AwesomeProject/iOS/AwesomeProject.xcodeproj目录中创建XCode工程

注:不管是 iOS 还是 Android,在开发调试阶段,都需要在 Mac 上启动一个 HTTP 服务,称为Debug Server,默认运行在 8081 端口,APP 通 Debug Server 加载 js。

2.概念

2.1 Component组件

  React Native 主要是通过 Virtual Dom 来实现显示页面或者页面中的模块。可以通过 React.createClass() 来创建自己的 Dom,在 React 中称之为组件(Component)

1. 创建组件
  1. // Android
  2. var React = require('react-native');
  3. var { DrawerLayoutAndroid,ProgressBarAndroid } = React;
  4.  
  5. var App = React.createClass({
  6. render: function() {
  7. return (
  8. <DrawerLayoutAndroid
  9. renderNavigationView={() => <Text>React Native</Text>}>
  10. <ProgressBarAndroid />
  11. </DrawerLayoutAndroid>
  12. );
  13. },});
  14.  
  15. // iOS
  16. var React = require('react-native');
  17. var { TabBarIOS,NavigatorIOS } = React;
  18.  
  19. var App = React.createClass({
  20. render: function() {
  21. return (
  22. <TabBarIOS>
  23. <TabBarIOS.Item title="React Native" selected={true}>
  24. <NavigatorIOS initialRoute={{ title: 'React Native' }} />
  25. </TabBarIOS.Item>
  26. </TabBarIOS>
  27. );
  28. },});
2. 使用组件

  类似 HTML 标准标签
<< MyCustomComponent />

<< MyCustomComponent >
<< /MyCustomComponent>

3. 组件生命周期

  React 组件的数据保存在自己内部的 state 变量中.都有相应回调。
- getInitialState: 获得初始化组件状态,只调用一次.
- componentWillMount: 组件将要加载,只调用一次
- componentDidMount: 组件加载完成并显示出来了,也就是完成了一次绘制,只调用一次
- render: 绘制组件,可能调用多次。
  

4. 自定义组件

  render 函数是必须的,其他可选

  1. var MyCustomComponent = React.createClass({
  2.  
  3. getInitialState: function() {
  4. // 这里返回一个对象,设置组件的初始化状态,后面就可以通过 this.state 来获得这个对象
  5. return {
  6. key1: data1,key2: data2,...
  7. };
  8. },componentWillMount: function() {
  9. // 这里一般做一些和界面显示无关的初始化操作
  10. },componentDidMount: function() {
  11. // 这里一般做加载数据的操作
  12. },render: function() {
  13. // 这是最重要的函数,用来绘制界面,所有的自定义组件,这个函数是必须提供的
  14. return(
  15. <View>
  16. ...
  17. </View>
  18. );
  19. },});
5. 组件数据

  根据组件的状态 state 来绘制动态页面

  1. render: function() {
  2. return(
  3. //把状态中的 key1 的值用 Text 组件直接显示
  4. <Text>{this.state.key1}</Text>
  5. );
  6. }
状态(statu)

  组件的状态(statu) 除了使用 getInitialState 方法来设置初始化状态外,在界面逻辑处理或者事件交互的过程中,
可以调用 this.setState(…) 方法修改组件的状态值。如果在代码中直接修改 state,React 就会把旧状态和新状态
做一个 diff,找到变化的部分,然后对应找到和这个变化的值关联的界面部分,请求重新绘制这个部分。

属性(Property)

  属性(Property)可以通过 this.props 来直接获取

  1. <View style={{flex: 1}}>

   区别: 一般 属性 表示静态的数据,组件创建后,就基本不变的内容,状态 是动态数据。

3.React Native布局

  React Native 的布局,实用的是 FlexBox 实现,类似网页的 CSS 布局方法

React Native 中的样式长度单位,是逻辑单位,概念和 Android 中的 dp 一样。

示例Demo: 知乎日报客户端
github源码地址

4.Android Studio示例工程概览

   MainActivity 已经针对React Native做了一层封装调用,默认帮我们维护了React Native的生命周期。

  1. import android.app.Activity;
  2. import android.os.Bundle;
  3. import android.view.KeyEvent;
  4.  
  5. import com.facebook.react.LifecycleState;
  6. import com.facebook.react.ReactInstanceManager;
  7. import com.facebook.react.ReactRootView;
  8. import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
  9. import com.facebook.react.shell.MainReactPackage;
  10. import com.facebook.soloader.SoLoader;
  11.  
  12. public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
  13.  
  14. private ReactInstanceManager mReactInstanceManager;
  15. private ReactRootView mReactRootView;
  16.  
  17. @Override
  18. protected void onCreate(Bundle savedInstanceState) {
  19. super.onCreate(savedInstanceState);
  20. mReactRootView = new ReactRootView(this);
  21.  
  22. mReactInstanceManager = ReactInstanceManager.builder()
  23. .setApplication(getApplication())
  24. .setBundleAssetName("index.android.bundle")
  25. .setJSMainModuleName("index.android")
  26. .addPackage(new MainReactPackage())
  27. .setUseDeveloperSupport(BuildConfig.DEBUG)
  28. .setInitialLifecycleState(LifecycleState.RESUMED)
  29. .build();
  30.  
  31. mReactRootView.startReactApplication(mReactInstanceManager,"AwesomeProject",null);
  32.  
  33. setContentView(mReactRootView);
  34. }
  35.  
  36. @Override
  37. public boolean onKeyUp(int keyCode,KeyEvent event) {
  38. if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
  39. mReactInstanceManager.showDevOptionsDialog();
  40. return true;
  41. }
  42. return super.onKeyUp(keyCode,event);
  43. }
  44.  
  45. @Override
  46. public void invokeDefaultOnBackPressed() {
  47. super.onBackPressed();
  48. }
  49.  
  50. @Override
  51. protected void onPause() {
  52. super.onPause();
  53.  
  54. if (mReactInstanceManager != null) {
  55. mReactInstanceManager.onPause();
  56. }
  57. }
  58.  
  59. @Override
  60. protected void onResume() {
  61. super.onResume();
  62.  
  63. if (mReactInstanceManager != null) {
  64. mReactInstanceManager.onResume(this);
  65. }
  66. }
  67. }

   index.android.js

  1. **
  2. * Sample React Native App
  3. * https://github.com/facebook/react-native
  4. */
  5. 'use strict';
  6.  
  7. var React = require('react-native');
  8. var {
  9. AppRegistry,StyleSheet,Text,View,} = React;
  10.  
  11. var AwesomeProject = React.createClass({
  12. render: function() {
  13. return (
  14. <View style={styles.container}>
  15. <Text style={styles.welcome}>
  16. Welcome to React Native!
  17. </Text>
  18. <Text style={styles.instructions}>
  19. To get started,edit index.android.js
  20. </Text>
  21. <Text style={styles.instructions}>
  22. Shake or press menu button for dev menu
  23. </Text>
  24. </View>
  25. );
  26. }
  27. });
  28.  
  29. var styles = StyleSheet.create({
  30. container: {
  31. flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {
  32. fontSize: 20,textAlign: 'center',margin: 10,instructions: {
  33. textAlign: 'center',color: '#333333',marginBottom: 5,});
  34.  
  35. AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);

   package.json 是工程的依赖和元数据配置文件:

  1. {
  2. "name": "AwesomeProject","version": "0.0.1","private": true,"scripts": { "start": "node_modules/react-native/packager/packager.sh" },"dependencies": { "react-native": "^0.11.0" } }

5.打包发布独立安装包

开发调试的时候必须启动个 JS Server,然后要让手机连接这个 Server。React Native 应用打包的时候,会连接 JS Server 下载一个 ReactNativeDevBundle.js 文件,然后放到应用数据的 files 目录下,就能运行这个 JS 文件

  目前 iOS 应用可用 react-native bundle 命令进行打包,android暂时没有支持
针对 Android 的 React Native 应用,可用 react-native-gradle 插件进行打包。该插件灵活配置打包参数,使用 Gradle Task 将资源打包到资源文件夹。

5.1 react-native-gradle 插件

  借助插件 react-native-gradle:com.facebook.react:gradleplugin:1.0.+ 可完成混淆及资源打包。(插件并没有发布到 JCenter 或者 Maven Centry)插件源码github地址

安装: react-native-gradle srain$ gradle install

项目中使用build.gradle配置:

  1. buildscript {
  2. repositories {
  3. mavenLocal() // 本地依赖
  4. jcenter()
  5. }
  6. dependencies {
  7. classpath 'com.android.tools.build:gradle:1.3.0'
  8. classpath 'com.facebook.react:gradleplugin:1.0.+' // 插件依赖
  9. }
  10. }

app/build.gradle配置:

  1. apply plugin: 'com.facebook.react'
  2.  
  3. react {
  4. bundleFileName "index.android.bundle" // assets 目录下 js 文件
  5. bundlePath "/index.android.bundle" // js 路径
  6. jsRoot "../" // js 源文件位置
  7. packagerHost "localhost:8081" // debug server 地址
  8. packagerCommand "./node_modules/react-native/packager/packager.sh" // 打包命令地址
  9.  
  10. devParams {
  11. skip true
  12. dev true
  13. inlineSourceMap false
  14. minify false
  15. runModule true
  16. }
  17. releaseParams {
  18. skip false
  19. dev false
  20. inlineSourceMap false
  21. minify true
  22. runModule true
  23. }
  24. }
Params参数:

  • skip 是否跳过从本地资源加载,从 Debug Server 请求资源
    其他四个参数通过 url 传给 Debug Server。
    • dev: 全局变量 DEV,React Native 核心类库的开发选项
    • minify: 混淆
    • inlineSourceMap: 是否加入 source map。默认 false
    • runModule: 是否在最后以 require(XXX) 的形式加入 module 的入口点。默认 true

require(“AwesomeProject/index.android.js”);
官网地址:https://facebook.github.io/react-native/

猜你在找的React相关文章