androidrn,AndroidR努比亚twrp

RN系列：Android原生与RN如何交互通信

React Native在Android混编项目中的页面跳转和方法调用大致可以通过上面这张简图来描述下：

RN通信原理简单地讲就是，一方native（java）将其部分方法注册成一个映射表，另一方（js）再在这个映射表中查找并调用相应的方法，而Bridge担当两者间桥接的角色。

其实方法调用大致分为2种情况：

RN调用Android需要module名和方法名相同，而Android调用RN只需要方法名相同。

（1）RCTDeviceEventEmitter 事件方式

优点：可任意时刻传递，Native主导控制。

（2）Callback 回调方式

优点：JS调用，Native返回。

缺点：CallBack为异步操作，返回时机不确定

（3）Promise

优点：JS调用，Native返回。

缺点：每次使用需要JS调用一次

（4）直传常量数据（原生向RN）

跨域传值，只能从原生端向RN端传递。RN端可通过 NativeModules.[module名].[参数名] 的方式获取。

注意： RN层调用NativeModule层进行界面跳转时，需要设置FLAG_ACTIVITY_NEW_TASK标志。

例如下分别以 原生调用RN 和 RN调用原生 为例简单描述下：

需要添加facebook的两个图片加载库：(注意版本号尽量与你使用的RN版本内部使用的fresco版本保持一直)

相关问答

Q1: 如何愉快地调试一个 React Native for Android APP

首先确保你的电脑和手机设备在同一个Wi-Fi环境下。其次你需要开启USB调试才能在你的设备上安装你的APP。一定要确定你已经打开设备的USB调试开关!确保你的设备已经被成功连接，可以输入adbdevices核实:在右边那列看到device说明你的设备已经被正确连接了。注意，你只应当连接仅仅一个设备。因为如果你连接了多个设备（包含模拟器在内），你后续的一些操作可能会失败。拔掉不需要的设备，或者关掉模拟器，确保adbdevices的输出只有一个是连接状态。现在我们可以运行react-nativerun-android来在设备上安装并启动我们的应用了这句命令执行后，实际上就是在本地起一个nodeserver，并且将你的androidproject编译打包，再上传到你的手机上。然后当js文件有改动或debug模式下手动选择reloadjs时候会自动更新bundle文件，达到改动js文件后即时显示的调试效果。这“红屏”又是什么鬼？别着急，是正常的，我们需要连接上开发服务器，下面的步骤会解决这个问题。摇晃手机，或者运行adbshellinputkeyevent82，可以调出开发者菜单。点击进入DevSettings点击Debugserverhostfordevice输入你电脑的IP地址和端口号（譬如我的是192.168.3.15:8081）注意：如果你的设备是android5.0以上版本(API21+)，就不用折腾这步了而是：运行adbreversetcp:8081tcp:8081（建立一个从设备向电脑转发的端口，前提是设备和电脑通过USB相连）不需要配置，你就可以使用ReloadJS和其它的开发选项了Chrome开发者工具在Chrome上调试js代码，需要在开发菜单中选择DebugJS，这会打开一个新的debugger-uitab页。在Chrome中，按下⌘+option+i或者选择视图(View)-开发者(Developer)-开发工具(DeveloperTools)来打开开发工具控制台。打开有异常时暂停（PauseOnCaughtExceptions）选项，能够获得更好的开发体验。Chrome中并不能直接看到App的用户界面，而只能提供console的输出，以及在sources项中断点调试js脚本。要查看APP日志？在终端下运行adblogcat*:SReactNative:VReactNativeJS:V可以看到你的应用的日志。实时刷新这个选项可以在你的js代码变更了之后，自动触发所连设备或者模拟器自动刷新。开启方法：先打开开发菜单，选择DevSettings，然后选择AutoreloadonJSchange选项。到此才能完整的调试AndroidRN,繁琐到累绝不爱。。等等，能否想法简化一下过程？既然我们的RN项目里包含了完整的android工程，何不把android工程导入到androidstudio去运行？不但可以同时查看js的日志和native的日志，而且开发android的同学最熟悉AS，利用AS的快捷键和各类插件提升调试效率。haveatry,答案是肯定的！执行react-nativestart也可以起一个nodeserver，只是它不帮你安装APP到device。以上就是我踩坑后整理的方法，按这套组合拳就可以愉快地调试了。水平有限，抛砖引玉，如果你有更好的方法！欢迎拍砖！此处插播一个广告：拍砖请拍到我们的杏树林开放空间（246078103），期待感兴趣的同学加入。之后要解决的一些issue1，关于设备MinSdkVerisonRN只支持Android4.1.2（API16）以上设备，4.0根据网络数据大概占比0.7比例，随着大部分app已经不支持4.0以下设备了，这块倒还可以接受,目前我们的病历夹是3.0(API-11),口袋是4.0(API-14)2，我们的androidRN现在只能通过DebugJS才能渲染出界面，而不能正常的用ReloadJS3，在界面跳转时卡的令人发指

Q2: 在android studio打开一个RN项目在gradle sync过程中出现了‘Failed to parse XML ……’的错误怎么解决

出现以上问题是由于git服务器上的版本和本地的版本不一致，导致gradle在更新配置造成的，点击更新gradle其他的更新都很顺利，唯独到:react-native-svg 时，一直更新不下来，开始以为时网络问题，但是自己点击相应的下载地址，也是可以正常下载的，就说明需要下载的配置文件的地址没问题，多次点击更新gradle还是如此，最后仔细查看相应的问题，一直卡在:react-native-svg 这个地方，最后自己反其道而行，打开webstorm直接打开项目文件，在项目中的terminal中直接输入yarn add react-native-svg，直接在webstorm中安装yarn add react-native-svg，之后再次打开androidstudio更新gradle最后完美解决。

由于也证明，如果再次遇到reactnative项目，需要androidstudio中打开遇到类似rn组件需要安装的，要在webstorm中晚装完成之后，在运行。

Q3: 区分页面是rn还是android原生

android用的是java语言开发的，RN是用JS语言开发的。你可以看一下app的特殊效果，有web样式独有的就是RN，原生的效果和动画会给人更稳定的感觉

Q4: android rn 是什么意思

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

private ReactInstanceManager mReactInstanceManager;

private ReactRootView mReactRootView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

mReactRootView = new ReactRootView(this