React Native 新版 native call js的方法

12 篇文章 0 订阅
11 篇文章 0 订阅

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',       
	 alignItems: 'center',        
	backgroundColor: '#F5FCFF',    
}});

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值