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;
}
//...
}