简单实现RN调用原生方法
Posted 谢玉胜的技术文章
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单实现RN调用原生方法相关的知识,希望对你有一定的参考价值。
在React Native中,一个“原生模块”就是一个实现了“RCTBridgeModule”协议的Objective-C类(个人理解RCTBridgeModule就是react与native之间的桥),下面我们来创建一只猫(cat)
我们现在ios根目录下创建一个.h头文件(CreatCat.h) 继承桥梁RCTBridgeModule
#import <Foundation/Foundation.h> #import "RCTBridgeModule.h" @interface CreatCat : NSObject <RCTBridgeModule> @end
2 然后我们创建.m文件(CreatCat.m)来实现这个类的一些方法
// // CreatCat.m // demo // // Created by xieyusheng on 2017/11/10. // Copyright ? 2017年 Facebook. All rights reserved. // #import <Foundation/Foundation.h> #import "CreatCat.h" @implementation CreatCat RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(cratCat:(NSString *)name sex:(NSString *)sex age:(int)age) { NSLog(@"我创建了一只名叫%@的猫,性别%@, 今年%d岁", name, sex, age); } //对外提供调用方法 RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location){ NSLog(@"Pretending to create an event %@ at %@", name, location); } //方法3 RCT_EXPORT_METHOD(whoName:(NSString *)name age:(int)age location:(NSString *)location){ NSLog(@"可以的%@,年来%d,还有%@",name,age,location); } @end
这里注意的是 RCT_EXPORT_MODULE(); 就是导出模块的意思 一般默认模块名称i就是类名
然后我们在实现方法 addEvent等等
然后在我们就可以在RN的js里面实现了
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from ‘react‘; import { Platform, StyleSheet, Text, View, Touchableopacity } from ‘react-native‘; //导入 var cat = require(‘react-native‘).NativeModules.CreatCat; const instructions = Platform.select({ ios: ‘Press Cmd+R to reload,\n‘ + ‘Cmd+D or shake for dev menu‘, android: ‘Double tap R on your keyboard to reload,\n‘ + ‘Shake or press menu button for dev menu‘, }); export default class App extends Component<{}> { //方法执行, show(){ // alert("aa") // cat.cratCat(‘机器猫‘, ‘男‘, 2); // cat.addEvent("血雨声","zaijia") cat.whoName("xieyusheng",12,"官渡") } render() { return ( <View style={styles.container}> <Text style={styles.welcome} onPress={()=>this.show()}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit App.js </Text> <Text style={styles.instructions}> {instructions} </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: ‘center‘, alignItems: ‘center‘, backgroundColor: ‘#F5FCFF‘, }, welcome: { fontSize: 20, textAlign: ‘center‘, margin: 10, }, instructions: { textAlign: ‘center‘, color: ‘#333333‘, marginBottom: 5, }, });
然后在Xcode的控制台上就可以看到打印的结果了
以上是关于简单实现RN调用原生方法的主要内容,如果未能解决你的问题,请参考以下文章
RN - 封装Android原生WebView组件,实现JS获取原生消息回调及JS控制native组件