ReactNative总结2之ReactNative与Native交互

1.RN如何调用native组件？

这块具体内容，官方文档写的非常详细了，就不在此赘余了。参考地址：http://reactnative.cn/docs/0.40/native-modules-android.html#content

2.RN如何跳转到native页面？

我们要从RN页面跳转到native页面，就要用到intent。但是如何使用intent呢？参考上边的RN调用native组件，就不难想到，我们可以把Intent跳转封装成一个RN组件。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

public class IntentFromJsModule  extends ReactContextBaseJavaModule {     public IntentFromJsModule(ReactApplicationContext reactContext) {         super(reactContext);     }       @Override     public String getName() {         return "IntentFromJsModule";     }       @ReactMethod     public void startActivityFromJS(String name,ReadableMap map ){         try{             Activity currentActivity = getCurrentActivity();             if(currentActivity != null){                 Class toActivity = Class.forName(name);                 Intent intent = new Intent(currentActivity,toActivity);                 ReadableNativeMap map2 = (ReadableNativeMap) map;                 HashMap<String,Object> map1 = map2.toHashMap();                 if(map1!=null && map1.size()>0){                     for(String key:map1.keySet()){                         intent.putExtra(key,(String)map1.get(key));                     }                 }                   currentActivity.startActivity(intent);             }         } catch (ClassNotFoundException e) {             e.printStackTrace();         }     }   }

当我们使用跳转时，直接用这个组件即可。为了实现传参，我们通过用ReadableMap来实现bundle数据的绑定。具体在RN端的调用如下：

当然如果需要startActivityForResult也可以用类似的方式

3.React Native如何实现页面刷新，不同的页面跳到不同的RN？

页面刷新参考之前的我们只需要setState来更新新的状态即可。

从Native跳转到不同的RN页面则可以通过指定不同的bundle来实现。具体如下：

我们可以通过制定不同的bundle和不同的app名称来实现不同RN页面的跳转。