reactNative与原生的交互

ios

原生类声明

@interface RctWxApi : NSObject<RCTBridgeModule>

@end

原生类实现

@implementation RctWxApi

@synthesize bridge = _bridge;

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(shareToTimeline:(NSDictionary *)data

:(RCTResponseSenderBlock)callback)

{

callback(@["传给js的数据"]);

}

@end

js中的写法

import {NativeModules} from 'react-native';

export default class HelloWorldApp2 extends Component {

onRegionChange(event) {

// Do stuff with event.region.latitude, etc.

}

render() {

var pWxApi = NativeModules.RctWxApi;

pWxApi.registerApp('wxe70e1d5ee7ee53ea', (x)=>alert(x));

function shareTo(){

pWxApi.shareToTimeline({type: 'text',description: '分享测试'},(x)=>alert(x)

);

}

属性

原生:

RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)

{

[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];

}

RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

#pragma mark MKMapViewDelegate

- (void)mapView:(RntMapView *)mapView regionDidChangeAnimated:(BOOL)animated

{

if (!mapView.onRegionChange) {

return;

}

MKCoordinateRegion region = mapView.region;

mapView.onRegionChange(@{

@"region": @{

@"latitude": @(region.center.latitude),

@"longitude": @(region.center.longitude),

@"latitudeDelta": @(region.span.latitudeDelta),

@"longitudeDelta": @(region.span.longitudeDelta),

}

});

}

js:

return <MapView

region={region}

style={{flex: 1}}

zoomEnabled={false}

onRegionChange={this.onRegionChange}

/>

;

android

js写法

ToastExample.show('Awesome', ToastExample.SHORT);

原生写法

public class ToastModule extends ReactContextBaseJavaModule {

private static final String DURATION_SHORT_KEY ="SHORT";

private static final String DURATION_LONG_KEY ="LONG";

public ToastModule(ReactApplicationContext reactContext){

super(reactContext);

}

@ReactMethod

public void show(String message,intduration){ Toast.makeText(getReactApplicationContext(), message, duration).show(); 

 }

}