react-native 添加 Toast 模块
2015-10-27 16:10
609 查看
1.创建一个原生模块开始。一个原生模块是一个通常继承
Java 类,并且实现了 JavaScript 需要实现的方法
public class AliToastAndroid extends ReactContextBaseJavaModule {
private static final String DURATION_SHORT_KEY = "SHORT";
private static final String DURATION_LONG_KEY = "LONG";
public AliToastAndroid(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "AliToastAndroid";
}
@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) {
Toast.makeText(getReactApplicationContext(), message, duration).show();
}
}
1.ReactContextBaseJavaModule 需要一个叫做
JavaScript 里面表示这个类的叫做
因此我们可以在 JavaScript 里面使用 React.NativeModules.AliToastAndroid 来得到它。
2.一个可选的叫做
JavaScript 的常量返回。这个方法的实现并不是必须的,但是却对在 JavaScript 和 Java 中同步的预定义的关键字的值非常重要。
3.给
JavaScript 暴露一个方法,一个 Java 方法需要使用
Native 的桥接是异步的,因此将一个结果传递给 JavaScript 的唯一方式就是使用回调函数或者调用事件
2.注册模块:
public class AnExampleReactPackage extends MainReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = super.createNativeModules(reactContext);
//new an Array intstead of abstract List exception
List<NativeModule> result = new ArrayList<>();
result.addAll(modules);
4000
result.add(new AliToastAndroid(reactContext));
return result;
}
}
3.在你的 JavaScript 文件里面你可以像下面这样调用方法:
var AliToastAndroid = React.NativeModules.AliToastAndroid
AliToastAndroid.show('444444', AliToastAndroid.LONG);
ReactContextBaseJavaModule类的
Java 类,并且实现了 JavaScript 需要实现的方法
public class AliToastAndroid extends ReactContextBaseJavaModule {
private static final String DURATION_SHORT_KEY = "SHORT";
private static final String DURATION_LONG_KEY = "LONG";
public AliToastAndroid(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "AliToastAndroid";
}
@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) {
Toast.makeText(getReactApplicationContext(), message, duration).show();
}
}
注意:
1.ReactContextBaseJavaModule 需要一个叫做
getName的方法被实现。这个方法的目的就是返回在
JavaScript 里面表示这个类的叫做
NativeModule的字符串的名字。在这里我们调用 AliToastAndroid
因此我们可以在 JavaScript 里面使用 React.NativeModules.AliToastAndroid 来得到它。
2.一个可选的叫做
getConstants的方法会将传递给
JavaScript 的常量返回。这个方法的实现并不是必须的,但是却对在 JavaScript 和 Java 中同步的预定义的关键字的值非常重要。
3.给
JavaScript 暴露一个方法,一个 Java 方法需要使用
@ReactMethod来注解。桥接的方法的返回值类型总是
void。React
Native 的桥接是异步的,因此将一个结果传递给 JavaScript 的唯一方式就是使用回调函数或者调用事件
2.注册模块:
public class AnExampleReactPackage extends MainReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = super.createNativeModules(reactContext);
//new an Array intstead of abstract List exception
List<NativeModule> result = new ArrayList<>();
result.addAll(modules);
4000
result.add(new AliToastAndroid(reactContext));
return result;
}
}
mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new AnExampleReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build();
3.在你的 JavaScript 文件里面你可以像下面这样调用方法:
var AliToastAndroid = React.NativeModules.AliToastAndroid
AliToastAndroid.show('444444', AliToastAndroid.LONG);
相关文章推荐
- 链路故障排查记
- Perl模块编写说明
- 在Lua中使用模块的基础教程
- Lua模块与包学习笔记
- Erlang中的模块与模式匹配介绍
- Ruby中使用SWIG编写ruby扩展模块实例
- Ruby中关于模块的一些基础知识
- Lua中的模块与module函数详解
- JavaScript模块规范之AMD规范和CMD规范
- apache rewrite_module模块使用教程
- ThinkPHP采用模块和操作分析
- Lua cjson模块编译笔记及错误解决方法
- linux下php加装mssql模块的方法
- 开启Apache mod_rewrite模块示例代码
- node.js调用C++开发的模块实例
- Lua中模块以及实现方法指南
- Lua中的模块(module)和包(package)详解
- Lua教程(十一):模块与包详解
- Perl的Mail::POP3Client模块和Gmail通信实例
- Perl List::Util模块使用实例