开发工具：WebStorm，Android Studio【后文简称AS】
参考链接：RN官方文档
前言：
开始正文前，先吐槽一下：
今天发现用命令行创建RN项目，运行项目会报错，原因在于npm在下载项目所需包的时候，被伟大的‘墙’给墙了，最近国家对VP-N[搞点特殊符号，避开敏感]管理还是比较严，所以大家在init项目时，最好打开科学工具上网；其次，要吐槽的是，RN官网文档还没更新，今天再实现一些方法时，发现有些方法消失不见了，不得不感慨，技术的更新迭代有点小快【RN的版本趋于稳定还有段日子要走】
接下来进入正题，官方文档使用Android Toast作为例子，今天我就用Android的Log作为例子。
一.创建项目：
1.打开终端，进入你项目的根目录，运行命令行：react-native init 项目名
（如：react-native init NativeMethodDemo）
2.项目创建完成，用WebStorm打开RN应用，用AS打开项目/android文件下的安卓项目；
二.在Android项目中创建并注册Log模块：
1.创建一个LogNativeModule的类，让其实现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端能调用的java方法；
2.注册模块，创建CustomReactPackage类，让它实现ReactPackage的接口【原来有三个方法，现在变成两个了】
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();
}
}
主要实现createNativeModules方法其返回一个NativeModule的列表
3.将第二步创建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调用Android原生方法（特别篇）
三.RN中封装模块以及调用
1.原生模块封装成一个JavaScript模块，方便我们开发调用【不是必须】，用WebStorm创建名为LogNativeModule.js，代码如下：
import {NativeModules} from 'react-native';
export default NativeModules.LogMethod;
就是两行代码代码这么简单，NativeModules.LogMethod中LogMethod就是Java代码中getName()返回的字符串【切记：名字一定要统一】
2.调用我们的模块：
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', '构造方法加载！');
}
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}>调用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没有logcat，我们可以用AS的日志猫检验是否调用成功[用Chrome前端调试工具也是看不到的，所以如果调试ES6代码就用自带的console =!]
网友评论