開發(fā)工具：WebStorm，Android Studio【后文簡稱AS】

參考鏈接：RN官方文檔

前言：

開始正文前，先吐槽一下：

今天發(fā)現(xiàn)用命令行創(chuàng)建RN項目，運行項目會報錯，原因在于npm在下載項目所需包的時候，被偉大的‘墻’給墻了，最近國家對VP-N[搞點特殊符號，避開敏感]管理還是比較嚴，所以大家在init項目時，最好打開科學工具上網(wǎng)；其次，要吐槽的是，RN官網(wǎng)文檔還沒更新，今天再實現(xiàn)一些方法時，發(fā)現(xiàn)有些方法消失不見了，不得不感慨，技術(shù)的更新迭代有點小快【RN的版本趨于穩(wěn)定還有段日子要走】

接下來進入正題，官方文檔使用Android Toast作為例子，今天我就用Android的Log作為例子。

一.創(chuàng)建項目：

1.打開終端，進入你項目的根目錄，運行命令行：react-native init 項目名

（如：react-native init NativeMethodDemo）

2.項目創(chuàng)建完成，用WebStorm打開RN應用，用AS打開項目/android文件下的安卓項目；

二.在Android項目中創(chuàng)建并注冊Log模塊：

1.創(chuàng)建一個LogNativeModule的類，讓其實現(xiàn)ReactContextBaseJavaModule

public class LogNativeModule extends ReactContextBaseJavaModule {

    private static final String MODULE_NAME = "LogMethod";

    public LogNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return MODULE_NAME;
    }
    
    @ReactMethod
    public void info(String tag, String msg) {
        Log.i(tag, msg);
    }
    
    @ReactMethod
    public void debug(String tag, String msg) {
        Log.d(tag, msg);
    }
    
    @ReactMethod
    public void warn(String tag, String msg) {
        Log.w(tag, msg);
    }
    
    @ReactMethod
    public void error(String tag, String msg) {
        Log.e(tag, msg);
    }
}

注：重寫getName()方法，返回的字符串在js端標記為這個模塊的名字；用@ReactMethod注釋你在js端能調(diào)用的java方法；

2.注冊模塊，創(chuàng)建CustomReactPackage類，讓它實現(xiàn)ReactPackage的接口【原來有三個方法，現(xiàn)在變成兩個了】

public class CustomReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        //modules.add(new ToastNativeModule(reactContext));
        modules.add(new LogNativeModule(reactContext));
        return modules;
    }

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

主要實現(xiàn)createNativeModules方法其返回一個NativeModule的列表

3.將第二步創(chuàng)建CustomReactPackage類加入到MainApplication.java文件的getPackages方法中，
具體路徑： android/app/src/main/java/com/your-app-name/MainApplication.java.

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }
    
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
        new MainReactPackage(), new CustomReactPackage()
        );
        }
    };
    
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
    
    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
    }
}

注：以上代碼為命令行自動生成，只要在getPackages方法里把CustomReactPackage類加入即可。

注：如果項目為原生應用接入RN代碼，這種方式接入會出錯，請參考Rect Native調(diào)用Android原生方法（特別篇）

三.RN中封裝模塊以及調(diào)用

1.原生模塊封裝成一個JavaScript模塊，方便我們開發(fā)調(diào)用【不是必須】，用WebStorm創(chuàng)建名為LogNativeModule.js，代碼如下：

import {NativeModules} from 'react-native';

export default NativeModules.LogMethod;

就是兩行代碼代碼這么簡單，NativeModules.LogMethod中LogMethod就是Java代碼中g(shù)etName()返回的字符串【切記：名字一定要統(tǒng)一】

2.調(diào)用我們的模塊：

import React, {Component} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import Toast from './js/ToastNativeModule';
import Log from './js/LogNativeModule';

export default class setup extends Component {

    constructor(props) {
        super(props);
        Log.info('yxjie', '構(gòu)造方法加載！');
    }
    
    componentWillMount() {
        Log.info('yxjie', 'componentWillMount加載！');
    }
    
    componentDidUpdate() {
        Log.info('yxjie', 'componentDidUpdate加載！');
    }
    
    render() {
        Log.debug('yxjie', 'render加載！');
        Toast.showMsg('成功了！');
        return (
            <View style={[styles.flex, styles.center]}>
            <Text style={styles.text}>調(diào)用Android原生方法</Text>
            </View>
    );
    }
};

const styles = StyleSheet.create({
    flex: {
        flex: 1,
        backgroundColor: 'skyblue',
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    
    text: {
        fontSize: 22,
        fontWeight: 'bold',
    }
});

3.運行RN項目，由于WebStorm沒有l(wèi)ogcat，我們可以用AS的日志貓檢驗是否調(diào)用成功[用Chrome前端調(diào)試工具也是看不到的，所以如果調(diào)試ES6代碼就用自帶的console ⁼!]

以上內(nèi)容如有錯誤，歡迎留言指正，謝謝！