原生模块就是把Android 里的API导出来给JS调用,说简单一点,就是让自己写的Java 函数能够在React Native 的js代码里调用。比如一些实现高性能的、多线程的代码,还有譬如图片处理、数据库 、或者各种高级扩展等等。 http://blog.csdn.net/black_dreamer/article/details/51902187 举个栗子: Toast模块: 1、继承ReactContextBaseJavaModule类,实现安卓 里面的Toast功能(就是调用Toast.makeText(* )),代码如下:
public class ToastModules extends ReactContextBaseJavaModule {
private static final String MODULES_NAME_TOAST = "ToastAndroid1" ;
private static final String TOAST_LONG_KEY = "LONG" ;
private static final String TOAST_SHORT_KEY = "SHORT" ;
public ToastModules (ReactApplicationContext reactContext) {
super (reactContext);
}
@Nullable
@Override
public Map<String, Object> getConstants () {
final Map<String, Object> constants = new HashMap<>() ;
constants.put(TOAST_LONG_KEY, Toast.LENGTH_LONG) ;
constants.put(TOAST_SHORT_KEY, Toast.LENGTH_SHORT) ;
return constants;
}
@Override
public String getName () {
return MODULES_NAME_TOAST;
}
@ReactMethod
public void show (String txt , int duration) {
Toast.makeText(getReactApplicationContext(),txt,duration).show() ;
}
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
2、创建类实现ReactPackage:
public class AppReactPackage implements ReactPackage {
@Override
public List <NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List <NativeModule> modules = new ArrayList<>() ;
modules.add(new LogModule(reactContext)) ;
modules.add(new ToastModules(reactContext)) ;
return modules ;
}
@Override
public List <Class <? extends JavaScriptModule >> createJSModules () {
return Collections.emptyList();
}
@Override
public List <ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
3、在MainActivity.java里注册AppReactPackage:
@Override
protected List<ReactPackage> getPackages () {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),new AppRactPackages();
);
}
错误统计:
Running application with appParams: {"initialProps" :{},"rootTag" :1 }.
__DEV__ === true , development-level warning are ON , performance optimizations are OFF
解决方法:在AS里clean一下project,然后gradle,然后start package,run-android。
问题参考:https://github.com/facebook/react-native/issues/3685