RN-Demo

RN知识体系图

Android/IOS上运行demo【 Android 4.1 and >= iOS 8.0.】

Android环境

1.下载ReactNative项目
git clone https://github.com/facebook/react-native.git
2.使用Android Studio安装ndk[r10e]配置ANDROID_NDK环境变量
3.下载boost_1_57_0.zip【c++库】放到目录\react-native\ReactAndroid\build\downloads
3.进入react-native目录 编译android项目
gradle :Examples:UIExplorer:android:app:installDebug
4.BUILD SUCCESSFUL后，在react-native目录下执行npm install 命令后再打开./packager/packager.sh 启动packager服务。

IOS环境

直接用Xcode打开UIExplorer.xcodeproj即可

报错：packager抛出异常Error: Cannot find module 'chalk'
解决：在cd react-native目录下 npm install chalk
npm install lodash  或者直接npm install 

Android原生与RN混合开发

1.用Android Studio导入RN项目，在RN项目中选择android/build.gradle文件。

2.在原生代码中定义实现类。

1.1  首先继承 ReactContextBaseJaveModule抽象类
public class SomeModule extends ReactContextBaseJavaModule{}
1.2  实现构造方法
public SomeModule(ReactApplicationContext context){
　　　　　　super(context);
　　　　}
1.3  实现 getName() 方法，并返回一个字符串
@Override
public String getName(){
　　　　　　return "SomeModule"; //返回值将在RN代码中使用
　　　　}
1.4  实现功能方法，使用注解@ReactMethod修饰(使用修饰ReactMethod的方法，可以在RN中被调用)
@ReactMethod
public void callbackMethod(Object paramsFromJS,Callback ok,Callback error){
　　　　　　//... do something , result = true
　　　　　　if(result){
　　　　　　　　ok.invoke("params");
　　　　　　}else{
　　　　　　　　error.invoke("error");
　　　　　　}
　　　　}
@ReactMethod
public void promiseMethod(Object paramsFromJS,Promise promise){
          // ... do something, result = true
　　　　　　if(result){
　　　　　　　　promise.resolve("params");
　　　　　　}else{
　　　　　　　　promise.reject("error");
　　　　　　}
　　　　}

3.原生注册模块

2.1 注册模块：实现ReactPackage接口
public class SomeReactPackage implements ReactPackage{

　　　　public List<NativeModule> createNativeModules(ReactApplicationContext reactContext){
　　　　　　return Collections.<NativeModule>singletonList(new SomeModule(reactContext));

　　　　}
　　　　public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
　　　　　　return Collections.emptyList();
　　　　}
　　　　public List<Class<? extends JavaScriptModule>> createJSModules() {
　　　　　　return Collections.emptyList();
　　　　}
　　} 
2.2  添加模块：在MainApplication类[extends Application implements ReactApplication]的getPackages()方法中添加模块
public List<ReactPackage> getPackages() {
　　　　　　return Arrays.<ReactPackage>asList(new MainReactPackage(),new SomeReactPackage());
　　　　}

4.RN中JS代码

3.1  首先导入库
import { NativeModules } from 'react-native'
3.2  调用原生方法　　NativeModules.SomeModule.callbackMethod('params',(ok)=>{},(error)=>{});　　　　
NativeModules.SomeModule.promiseMethod('params').then((ok)=>{}).catch((error)=>{});　　　　

bug：

报错： outDexFolder must be a folder 解决方法：不理它  或者 clean
报错：> Failed to create \android\app\buildintermediates\debug\merging 解决方法：不理它  或者 clean
报错：Could not delete path \android\app\build\generated\source\r\debug\com'.   解决方法：用Android Studio build clean