react native 學習筆記----使用Android的原生模塊

有時候App需要訪問平臺API，但React Native可能還沒有相應的模塊包裝；或者你需要複用一些Java代碼，而不是用Javascript重新實現一遍；又或者你需要實現某些高性能的、多線程的代碼，譬如圖片處理、數據庫、或者各種高級擴展等等。

我們把React Native設計爲可以在其基礎上編寫真正的原生代碼，並且可以訪問平臺所有的能力，我們可以自己實現一些封裝，供JS調用。

react native中文網，和原官方網站給出的例子不是很詳細，我這裏就給出詳細的步驟，一步一步的給出如何調用toast這個模塊的。

第一步：在命令行下輸入下面的命令 創建一個react native工程

$ react-native init ToastTest 

第二步：創建一個原生模塊。一個原生模塊是一個繼承了ReactContextBaseJavaModule的Java類，它可以實現一些JavaScript所需的功能。代碼如下：

package com.toasttest;

import android.widget.Toast;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.Map;
import java.util.HashMap;

public class ToastHello extends ReactContextBaseJavaModule {
  private static final String DURATION_SHORT_KEY = "SHORT";
  private static final String DURATION_LONG_KEY = "LONG";
  public ToastHello(ReactApplicationContext reactContext) {
    super(reactContext);
  }

    @Override
    public String getName() {  //返回供JS調用的模塊名字
        return "ToastHello";
    }

    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }

    @ReactMethod
    public void show(String message, int duration) {  //供js調用的具體方法
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }
}

文件結構如下：

第三步：註冊模塊 

我們需要在應用的Package類的createNativeModules方法中添加這個模塊。以便在JavaScript中訪問到剛纔寫的原生模塊。

新建一個ToastHelloPackage.java類，輸入一下代碼：文件的目錄結構參看上圖

package com.toasttest;

/**
 * Created by andy on 16/9/1.
 */
 
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class ToastHelloPackage implements ReactPackage{
    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new ToastHello(reactContext));

        return modules;
    }
}

第四步：把原生模塊封裝成一個JavaScript模塊 

這一步不是必須的，但是不封裝如何調用，我還不知掉，就按照文檔說的封裝吧，哈哈

在index.android.js 的同級目錄新建一個文件ToastHello.js，輸入一下內容：

'use strict';

/**
 * This exposes the native ToastAndroid module as a JS module. This has a function 'show'
 * which takes the following parameters:
 *
 * 1. String message: A string with the text to toast
 * 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG
 */
import { NativeModules } from 'react-native';

// 下一句中的ToastAndroid即對應上文
// public String getName()中返回的字符串
// 練習時請務必選擇另外的名字！

export default NativeModules.ToastHello;

第五步：在js調用剛纔寫的方法

本例子除了在js一加載就調用了該方法，還寫了一個button，點擊button也會調用剛纔的方法。代碼如下：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,TouchableHighlight,
  Text,
  View
} from 'react-native';
import ToastHello from './ToastHello'

class Mybutton extends Component{
  _onPressButton(){
    ToastHello.show('Button call native fun!',ToastHello.SHORT);   //點擊按鈕調用native方法
  }
  render(){
    return (
      <TouchableHighlight onPress={this._onPressButton}>
              <Text>Button</Text>
      </TouchableHighlight>
    );
  }
}

class ToastTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Mybutton style={{width:300,height:200}}/>
        <Text style={styles.welcome}>
          Welcome Andy!
        </Text>
      </View>
    );
  }


  componentDidMount() {//React組件的一個生命週期方法，組件加載完後調用。
    ToastHello.show('Hello andy! call native fun',ToastHello.LONG);  //調用native方法
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

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

 參考文檔：  react native中文網 原生模塊      Native Modules