React Native 新版 native call js的方法

1. 集成RCTEventEmitter

@interface CustomEventEmitter :RCTEventEmitter


@end


#import "CustomEventEmitter.h"


@implementation CustomEventEmitter


RCT_EXPORT_MODULE(CustomEventEmitter);


- (instancetype)init

{

self = [superinit];

if (self) {

//因为CustomEventEmitter实例不是自己创建的 故拿不到实例, 想调用该实力的方法需要NSNotificationCenter 这是比较low的地方

[[NSNotificationCenterdefaultCenter] addobserver:selfselector:@selector(updateAddress:)name:@"UpdateAddress"object:nil];

[[NSNotificationCenterdefaultCenter] addobserver:selfselector:@selector(updateTelphone:)name:@"UpdateTelphone"object:nil];

}

returnself;

}


//此方法必须重载

- (NSArray<Nsstring *> *)supportedEvents

{

return @[@"UpdateAddress"];

}


- (void)updateAddress:(NSNotification *)notification

{

[selfsendEventWithName:@"UpdateAddress"body:@{@"address" :@"SZ"}];

}


- (void)updateTelphone:(NSNotification *)notification

{

[selfsendEventWithName:@"UpdateTelphone"body:@{@"telphone" :@"138"}];

}


2. 在JS需如下操作
import React,{Component} from 'react';
import {
    AppRegistry,StyleSheet,Text,View,    NativeModules,NativeEventEmitter,
    Image,} from 'react-native';
const CustomEventEmitter = NativeModules.CustomEventEmitter;
const EE = new NativeEventEmitter(CustomEventEmitter);  //创建自定义事件接口  export default class TestOCCallRN extends Component {
    render() {
        return (
            <View style={styles.container}>

                <Image source={require('./1.png')}
                       style={{width: 400,height: 400}} />
            </View>
        );
    }

    componentwillMount() {
        this.listener = EE.addListener("UpdateAddress",this.updateAddress.bind(this));
    }

    componentwillUnmount() {
        this.listener && this.listener.remove();
        this.listener = null;
    }

    updateAddress(data) {
 console.log(data.address);
}}
 
const styles = StyleSheet.create({  
  container: {       
	 flex: 1,
	 justifyContent: 'center',255); font-family:Menlo; font-size:9pt">	 alignItems: 'center',255); font-family:Menlo; font-size:9pt"> backgroundColor: '#F5FCFF',255); font-family:Menlo; font-size:9pt">}});

AppRegistry.registerComponent('TestOCCallRN',() => TestOCCallRN);

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...