React Native For Android初體驗

jopen 10年前發布 | 48K 次閱讀 Android開發移動開發 React Native for Android

React Native For Android初體驗

@author ASCE1885的 Github 簡書微博 CSDN

React Native For Android提前發布了，代碼托管在Github上面，本文是一個嘗鮮體驗，主要介紹環境配置的過程。

環境配置

目前React Native只支持在OS X系統上面進行開發，其他系統的筒靴們請掩淚飄過。

搭建React Native的開發環境涉及到幾個工具，這里我們簡單介紹一下：

Homebrew

Homebrew是一個方便開發者在MAC OS X系統上面安裝Linux工具包的ruby腳本，而MAC OS X已經內置了ruby的解釋環境，因此安裝Homebrew只需執行以下腳本：

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

更多關于Homebrew的用法請參見官方文檔。關于Homebrew的作者，還有一個趣聞：白板編程沒寫出反轉二叉樹，Homebrew 作者被谷歌拒掉了。

nvm

Node版本管理器，是一個簡單的bash腳本，用來管理同一臺電腦上的多個node.js版本，并可實現方便的版本間切換。我們可以使用Homebrew來安裝nvm：

brew install nvm

然后打開.bashrc文件

vim $HOME/.bashrc

添加如下配置：

export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

當然也可以選擇官方的安裝方法，就不用自己手動寫.bashrc文件了：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.1/install.sh | bash

或者

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.26.1/install.sh | bash

這樣配置之后，在Terminal輸入nvm命令還是提示command not found，需要再次輸入：

. ~/.nvm/nvm.sh

激活nvm，這一點比較奇怪，因為我們在.bashrc已經設置了才對。

Node.js

基于Chrome V8 JavaScript引擎實現的一個JavaScript運行時，可用于方便地搭建響應速度快、易于擴展的網絡應用。Node.js 使用事件驅動，非阻塞I/O 模型而得以輕量和高效，非常適合在分布式設備上運行的數據密集型的實時應用。通過nvm安裝Node.js的命令如下：

nvm install node && nvm alias default node

不過可能由于網絡或者服務不穩定，實際上使用這個命令安裝可能會失敗，就算成功也會花費較長的時間，因此建議到Node.js官網去直接下載pkg包：

watchman

非死book 開源的一個文件監控服務，用來監視文件并且記錄文件的改動情況，當文件變更它可以觸發一些操作，例如執行一些命令等等。安裝watchman，是為了規避node文件監控的一個bug，安裝很簡單，腳本如下：

brew install watchman

flow

非死book 出品的一個用于 JavaScript 代碼靜態類型檢查的工具，用于找出 JavaScript 代碼中的類型錯誤。Flow 采用 OCaml 語言開發。安裝腳本如下：

brew install flow

安裝完成之后，可以執行如下命令更新 Homebrew 的信息，并升級所有可以升級的軟件：

brew update && brew upgrade

Android開發環境要求

打開Android SDK Manager，確保如下工具和開發包已經安裝：

SDK：

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

模擬器：

Intel x86 Atom System Image (for Android 5.1.1 - API 22)
Intel x86 Emulator Accelerator (HAXM installer)

React Native工程配置

安裝react-native

npm install -g react-native-cli

在Terminal中運行以上腳本，成功后，就可以在Terminal中使用react-native這個命令了，這個腳本只需執行一次。

生成工程

react-native init AwesomeProject

在Terminal中執行以上腳本，它會下載React Native工程源碼和依賴，并在AwesomeProject/iOS/AwesomeProject.xcodeproj目錄中創建XCode工程，在AwesomeProject/android/app創建Android Studio工程。生成的示例工程目錄如下所示：

至此，React Native配置完成。

Android Studio工程概覽

使用Android Studio打開AwesomeProject/android/app，Gradle會去下載一系列依賴的函數包，這個過程視網速而定，可能會比較長時間。打開app/build.gradle文件，可以看到該module依賴react-native的一個jar包：

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.1"

    defaultConfig {
        applicationId "com.awesomeproject"
        minSdkVersion 16
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.0'
    compile 'com.非死book.react:react-native:0.11.+'
}

打開示例工程唯一的類MainActivity，可以發現已經針對React Native做了一層封裝調用，默認幫我們維護了React Native的生命周期。

package com.awesomeproject;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;

import com.非死book.react.LifecycleState;
import com.非死book.react.ReactInstanceManager;
import com.非死book.react.ReactRootView;
import com.非死book.react.modules.core.DefaultHardwareBackBtnHandler;
import com.非死book.react.shell.MainReactPackage;
import com.非死book.soloader.SoLoader;

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

    private ReactInstanceManager mReactInstanceManager;
    private ReactRootView mReactRootView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);

        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", null);

        setContentView(mReactRootView);
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
      super.onBackPressed();
    }

    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onPause();
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onResume(this);
        }
    }
}

工程目錄下的index.android.js是基于React寫的js主模塊代碼：

/**
 * Sample React Native App
 * https://github.com/非死book/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
});

var 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,
  },
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

而package.json是工程的依賴和元數據配置文件：

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

最后說一句，想要學習React Native For Android，最好是具有Javascript和React的相關經驗。

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1442892325466.html

Android開發移動開發 React Native for Android

React Native For Android初體驗

React Native For Android初體驗

環境配置

Homebrew

nvm

Node.js

watchman

flow

Android開發環境要求

React Native工程配置

安裝react-native

生成工程

Android Studio工程概覽

相關經驗

相關資訊

相關文檔

目錄