react-native调用Android原生模块
从Javascript发起一个Toast消息
- 创建一个CustomToast.java文件
public class CustomToast extends ReactContextBaseJavaModule {
private static final String DURATION_SHORT_KEY = "SHORT";
private static final String DURATION_LONG_KEY = "LONG";
public CustomToast(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "CustomToast";
}
/**
* 一个可选的方法getContants返回了需要导出给JavaScript使用的常量。
* 它并不一定需要实现，但在定义一些可以被JavaScript同步访问到的预定义的值时非常有用。
*/
@Nullable
@Override
public Map<String, Object> getConstants() {
final Map<String, Object> constants = new HashMap();
constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
return constants;
}
/**
* 要导出一个方法给JavaScript使用，Java方法需要使用注解@ReactMethod。
* 方法的返回类型必须为void。React Native的跨语言访问是异步进行的，
* 所以想要给JavaScript返回一个值的唯一办法是使用回调函数或者发送事件
* @param message
* @param duration
*/
@ReactMethod
public void show(String message, int duration) {
Toast.makeText(getReactApplicationContext(), message, duration).show();
}
}
- 下面的参数类型在@ReactMethod注明的方法中，会被直接映射到它们对应的JavaScript类型(例如上面的show方法，它被标明了@ReactMethod，所以它的参数会映射成下面这样)。
Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
ReadableMap -> Object
ReadableArray -> Array
- 注册模块 MyToastReactPaket.java
public class MyToastReactPaket implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new CustomToast(reactContext));
return modules;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
- 在MainApplication中添加如下
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MyToastReactPaket()
);
}
- 增加js代码 JavaScript端的模块封装 创建一个CustomToast.js
'use strict'
import {NativeModules} from 'react-native';
export default NativeModules.CustomToast;
6.测试例子 更改app.js
import React, { Component } from 'react';
import { Text } from 'react-native';
import CustomToast from './CustomToast';
export default class HelloWorldApp extends Component {
render() {
return (
<Text onPress={() => CustomToast.show('12313123',CustomToast.SHORT)}>弹出Toast</Text>
);
}
