java rn br,RN和原生间的事件传递 – react-native-event-br...

react-native-event-bridge

Send and Receive events between React Native and native.

DISCLAIMER

This project is currently in beta.

Core APIs are subject to change. We encourage people to try this library out and provide us feedback as we get it to a stable state.

Getting started

$ npm install react-native-event-bridge –save

Mostly automatic installation

$ react-native link react-native-event-bridge

Manual installation

iOS

In Xcode, in the project navigator, right clickLibraries?Add Files to [your project’s name]

Go tonode_modules?react-native-event-bridgeand addMSREventBridge.xcodeproj

In Xcode, in the project navigator, select your project. AddlibMSREventBridge.ato your project’sBuild Phases?Link Binary With Libraries

Run your project (Cmd+R)<

Android

Open upandroid/app/src/main/java/[…]/MainActivity.java

Addimport net.mischneider.MSREventBridgePackage;to the imports at the top of the file

Addnew MSREventBridgePackage()to the list returned by thegetPackages()method

Append the following lines toandroid/settings.gradle:

include ':react-native-event-bridge'

project(':react-native-event-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-event-bridge/android')

Insert the following lines inside the dependencies block inandroid/app/build.gradle:

compile project(':react-native-event-bridge')

Usage

For different usage examples look into the example folder.

Emit events from React Native

JavaScript

import EventBridge from 'react-native-event-bridge';

// Emit an event from within a React component

EventBridge.emitEvent(this, 'PresentScreen');

// Emit an event with callback from within a React component

EventBridge.emitEventCallback(this, 'EventWithCallback', () => {

Alert.alert("Callback Response", "Some Callback Response");

});

Handle events from native

iOS:

// Implemented by a UIViewController subclass

- (void)onEventWithName:(NSString *)eventName info:(nullable NSDictionary *)info

{

// Handle events dispatched from React Native

RCTLog(@"%@ - Received event: '%@', with info: %@", self.UUID.UUIDString, eventName, info);

// Example for PresentScreen event

if ([eventName isEqualToString:PresentScreenEvent] ) {

ViewController *newViewController = [ViewController new];

[self presentViewController:newViewController animated:YES completion:nil];

return;

}

// ...

}

Android:

@Override

public void onEvent(final String name, final ReadableMap info) {

Log.d(ReactConstants.TAG, this.getClass().getName() + ": Received event: ".concat(name));

// Example to just present a new activity

if (name.equals(PresentScreenEventName)) {

Intent myIntent = new Intent(getBaseContext(), SecondActivity.class);

startActivity(myIntent);

return;

}

// ...

}

Subscribe to events in React Native

JavaScript

import EventBridge from 'react-native-event-bridge';

componentDidMount() {

// Register for any kind of event that will be sent from the native side

this._eventSubscription = EventBridge.addEventListener(this, (name, info) => {

console.log("Received event from native: '" + name + "' with info: " + JSON.stringify(info));

});

}

componentWillUnmount() {

this._eventSubscription && this._eventSubscription.remove();

}

Sending events from native

iOS

//...

// Get the RCTBridge

RCTBridge *bridge = ...;

// Send an event with name 'eventName' to listeners for this event within the React Native component hierarchy

// of that is managed by this view

[bridge.viewControllerEventEmitter emitEventForView:self.view name:@"eventName" info:@{

@"rowSelected" : info[@"rowID"]

}];

/...

Android

// Get the MSREventBridgeInstanceManagerProvider somehow

MSREventBridgeInstanceManagerProvider instanceManagerProvider =

(MSREventBridgeInstanceManagerProvider)this.getApplicationContext();

// Emit event via MSREventBridgeModule

String rowID = ...;

WritableMap map = new WritableNativeMap();

map.putString("rowSelected", rowID);

MSREventBridgeModule.emitEventForActivity(this, instanceManagerProvider, "eventName", map);

Example fetching data

JavaScript

// Fetch some data

this.setState({

isLoading: true

})

// Load some data and update the data source

EventBridge.emitEventInfoCallback(this, 'LoadData', {'count' : 10}, (error, result) => {

this.setState({

isLoading: false,

dataSource: this.state.dataSource.cloneWithRows(result),

});

});

iOS

- (void)onEventWithName:(NSString *)eventName info:(nullable NSDictionary *)info callback:(nullable RCTResponseSenderBlock)callback;

{

RCTLog(@"%@ - Received event that expects callback: '%@', with info: %@", self.UUID.UUIDString, eventName, info);

// Example for LoadData event

if ([eventName isEqualToString:LoadDataEvent]) {

// Get the count parameter from the LoadDataEvent

NSNumber *count = info[LoadDataEventCountParameterKey];

// Simulate some data fetching

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

NSMutableArray *responseData = [NSMutableArray array];

for (int i = 0; i < count.integerValue; i++) {

[responseData addObject:[NSString stringWithFormat:@"row %i", i]];

}

// Call callback with some error as first parameter if so and second with respnse data

if (callback) {

callback(@[[NSNull null], responseData]);

}

});

return;

}

// ...

}

Android

@Override

public void onEventCallback(final String name, final ReadableMap info, final Callback callback) {

Log.d(ReactConstants.TAG, this.getClass().getName() + ": Received event with callback: ".concat(name));

final String activityClassName = this.getClass().getSimpleName();

// Example how to load some async data

if (name.equals(LoadDataEventName)) {

final int count = info.getInt("count");

// Simulate some data loading delay

final Handler handler = new Handler();

handler.postDelayed(new Runnable() {

@Override

public void run() {

WritableArray array = new WritableNativeArray();

for (int i = 0; i < count; i++) {

array.pushString("Row " + i + " - " + activityClassName);

}

callback.invoke(null, array); // First parameter is error and the second is data

}

}, 2000);

return;

}

//...

}