2024年前端最全ReactNative进阶（五）：React Native与原生通信_rn调用原生，【干货】

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

设置方法调用原生代码

call_button(){
NativeModules.ToastModule.rnCallNative(‘RN与安卓开发’);
}

布置UI 在`render`方法里面设置当用户点击文字时，调用自定义的方法call\_button。并且以这种形式创建的方法需要进行绑定。

render() {
return(

测试原生通讯

);
}
…
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor:‘deeppink’,
flexDirection:‘row’,
justifyContent:‘center’,
alignItems:‘center’ },
});

RN调用原生的方法，此时安卓的application就会启动，完成之后它会去找`Package`列表，进而找到自己创建的列表。而在组件的列表里面有一个原生模块列表，到自己的模块列表里面调用模块里的方法就完成了调用。


#### 2.2 RN 应用消息机制方式与安卓原生代码切换


在原生代码中添加一个按钮，当用户从RN界面调用原生代码就会进入到原生代码开发的界面中，而点击原生代码中的按钮就会返回到RN界面。


实施步骤如下：


1. 在与`MainApplication`同级的目录下创建一个MyActivity，会自动生成一个自动布局文件activity\_my做布局的工作。
2. 打开布局文件，将左下角的`Design`切换成Text文件，为原生界面创建一个按钮并且布局。

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
android:layout_width = “match_parent”
android:layout_height=“match_parent”
xmlns:android = “http://schemas.android.com/apk/res/android”

3. 回到新创建的MyActivity代码，实现onBack方法。

//点击按钮，直接完成
public void onBack(View v){
finish();
}

4. 在MyNativeModule原生模块中去实现Activity。

//方法不能返回值 因为被调用的原生代码是异步的 原生代码执行结束之后只能通过回调函数或者发送消息给RN
@ReactMethod
public void rnCallNative(String msg){
Toast.makeText(mContext,msg,Toast.LENGTH_LONG).show();
Intent intent = new Intent(mContext,MyActivity.class); //创建一个意图，意图是android进程之间、线程之间、交换数据的载体
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); //一定要加上这句
mContext.startActivity(intent);
}

#### 2.3 RN 应用 Promise 机制与安卓原生代码通信


使用`Promise`机制也是RN与原生通信的一种方式。在原生代码的MyNativeModule文件中创建桥接方法，当桥接的原生方法的最后一个参数是一个`Promise`对象，那么该方法会返回一个JS的`Promise`对象给与之对应的js方法。与上文类似，需要暴露给RN的方法不能有返回值，并且要以注释`@ReactMethod`标识。

@ReactMethod
public void rnCallNative_promise(String msg,Promise promise){
Toast.makeText(mContext,msg,Toast.LENGTH_SHORT).show();
//得到组件名称
String componentName = getCurrentActivity().getComponentName().toString();
promise.resolve(componentName);
}

在RN中创建一个方法，这个方法内部使用`NativeModules`组件来调用原生模块提供的名称，进而找到要调用的原生方法。原生方法最后一个参数是一个`promise`，所以在js中用`.then`的方法实现即可。

callAndroid_promise(){
NativeModules.ToastModule.rnCallNative_promise(‘promise调用原生’).then(
(msg) => {
console.log(‘promise收到消息:’+msg);
}
).catch(
(err)=>{
console.log(err);
}
)
}

渲染方法中，调用方法。

Promise通信
…
welcome: {
fontSize: 16,
textAlign: ‘left’,
margin: 10
}

#### 2.4 RN 应用 callback 回调方式与安卓原生代码通信


在原生模块中暴露一个桥接方法给RN调用，参数传入一个成功的回调和一个失败的回调。

@ReactMethod
public void measureLayout(Callback errorCallback,Callback successCallback){
try {
successCallback.invoke(100,100,200,200); //调用回调函数，返回结果
}catch (IllegalViewOperationException e){
errorCallback.invoke(e.getMessage());
}
}

在js中实现回调方法。同样是通过`NativeModules`组件寻找到桥接名称ToastModule，进而找到想要调用的方法。拿到返回的参数，做功能处理。

callAndroid_callback(){
NativeModules.ToastModule.measureLayout(
(msg)=>{
console.log(msg);
},
(x,y,width,height)=>{
console.log(‘x坐标:’+x+‘y坐标:’+y+‘高:’+height+‘宽’+width);
}
)
}

在使用回调函数时会呈现出某些缺点，比如说每次调用只应当调用一次，多次调用可能会出现意想不到的结果，并且用这种方法安卓原生代码是无法主动发送信息给RN侧的。


### 三、RN与IOS通信


首先 RN 与 IOS 通信,在原生端需创建一个`bridge` ,并遵守协议。

#import <React/RCTBridgeModule.h>
@interface PushModule : NSObject

其次，在`@implementation`中导出 `Module`。

@implementation PushModule
RCT_EXPORT_MODULE()

有以下3种通信方式。


#### 3.1 定义导出的方法名

RCT_EXPORT_METHOD(pushEvent:(NSString *)event callback:(RCTResponseSenderBlock)callback){
NSLog(@“----对React Native提供调用方法,Callback—%@”,event);
NSString *callbackData = @“原生数据被RN调用”; //准备回调回去的数据
callback(@[[NSNull null],callbackData]);
}

定义一个方法后，RN 就可通过`NativeModules`获取到对于 `Module`后调用相应方法，event是 RN 传给 IOS 的值，IOS 这边可通过 `callback` 这个 block 回调给 RN 数据。

callBackEvent (){
NativeModules.PushModule.pushEvent((‘RN->原生的数据’),(error, events) => {
if (error) {
console.log(error);
}else {
alert(events)
}
})
}

#### 3.2 promise 实现回调函数

static RCTPromiseResolveBlock _resolve;//成功回调
static RCTPromiseRejectBlock _reject;//失败回调

RCT_REMAP_METHOD(pushPromisesEvent,
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject){
_resolve = resolve;
_reject = reject;
}

//异步回调函数
+(void) handleResult:(id)result{
//原生Promises数据被RN调用
if ([result isEqualToString:@“获取数据成功”]) {
_resolve(@[result]);
}else{
//返回错误信息
NSError *error=[NSError errorWithDomain:result code:101 userInfo:nil];
_reject(@“no_events”, @“There were no events”, error);
}
}

RN 侧方法调用。

NativeModules.PushModule.pushPromisesEvent().then((events)=>{
alert(events+1111)
}).catch((e)=>{
// alert(e)
console.log(“错误信息------”+e);
})
}

#### 3.3 继承 RCTEventEmitter 类


打开全栈工匠技能包-1小时轻松掌握SSR

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi00NWMyNWY5NmI2YTQzOWU5N2UzNGJjNjdjNzIyZDFiYl9oZC5qcGc?x-oss-process=image/format,png)



两小时精通jq+bs插件开发

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMzLnpoaW1nLmNvbS84MC92Mi01ZGU5MTQ1ZDI0OWJmZDliNTFiZjMyOTVmMTg2ZGFlZV9oZC5qcGc?x-oss-process=image/format,png)

生产环境下如歌部署Node.js

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi01NjcyZjU2ZTg1NTcwMDM3ZTg1ZmJlODI0MDA3MDJiYl9oZC5qcGc?x-oss-process=image/format,png)



网易内部VUE自定义插件库NPM集成

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMzLnpoaW1nLmNvbS84MC92Mi1kN2M3ZWVjOWJiZGVmYjJiMjNjNzExNzgzZWM4MzIwZV9oZC5qcGc?x-oss-process=image/format,png)



谁说前端不用懂安全，XSS跨站脚本的危害

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi0yNDAwODRhMGFlNzQwNmUzMWI4NjM0NTk3ZTFjOWQwN19oZC5qcGc?x-oss-process=image/format,png)



webpack的loader到底是什么样的？两小时带你写一个自己loader

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi0xOWQ2YTQ4MTJmZmQzZjZmYzdlYjJmMjJlMjUwZTM2Y19oZC5qcGc?x-oss-process=image/format,png)

ps://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi0yNDAwODRhMGFlNzQwNmUzMWI4NjM0NTk3ZTFjOWQwN19oZC5qcGc?x-oss-process=image/format,png)



webpack的loader到底是什么样的？两小时带你写一个自己loader

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi0xOWQ2YTQ4MTJmZmQzZjZmYzdlYjJmMjJlMjUwZTM2Y19oZC5qcGc?x-oss-process=image/format,png)