最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

React Native與Android 原生通信的方法

 更新時(shí)間：2018年05月05日 15:21:26   作者：Jack921  
本篇文章主要介紹了React Native與Android 原生通信的方法，主要是分享原生模塊與JS傳遞數(shù)據(jù)的幾種方式，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

我們用React Native 做混合開(kāi)發(fā)的時(shí)候免不了要原生和React Native 進(jìn)行通信交互，這篇文章就是分享原生模塊與JS傳遞數(shù)據(jù)的幾種方式。

總的步驟可以分為如下幾點(diǎn)：

  1. 在原生端定義Module類(lèi),繼承ReactContextBaseJavaModule,在Module類(lèi)里,定義交互的方法.
  2. 定義Package類(lèi)，繼承ReactPackage,將Module實(shí)例添加到集合.
  3. 在android繼承的ReactApplication,回調(diào)實(shí)現(xiàn)getPackages方法，將Package實(shí)例添加到getPackages下的集合。

如下是Mudule類(lèi)的實(shí)例代碼，為了方便大家理解，我把代碼全部貼出來(lái)，在一一講解。

import android.support.annotation.Nullable;
import android.widget.Toast;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import java.util.HashMap;
import java.util.Map;
public class ToastExample extends ReactContextBaseJavaModule{
  private static final String LONG_TIME = "LONG";
  private static final String SHORT_TIME = "SHORT";
  private static final String MESSAGE = "MESSAGE";

  public ToastExample(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "ToastForAndroid";
  }

  @ReactMethod
  public void getDataFromIntent(Callback callback){
    try{
      Activity currentActivity=getCurrentActivity();
      String result =currentActivity.getIntent().getStringExtra("data");
      if(TextUtils.isEmpty(result)){
        callback.invoke("no_data");
      }else{
        callback.invoke(result);
      }
    }catch (Exception e){
      callback.invoke("error");
    }
  }

  @Override
  public Map<String, Object> getConstants() {
    //讓js那邊能夠使用這些常量
    Map<String,Object> constants = new HashMap<>();
    constants.put(LONG_TIME, Toast.LENGTH_LONG);
    constants.put(SHORT_TIME,Toast.LENGTH_SHORT);
    constants.put(MESSAGE,"getConstants");
    return constants;
  }

  @ReactMethod
  public void show(int duration){
    Toast.makeText(getReactApplicationContext(),"message:"+duration,duration).show();
  }

  @ReactMethod
  public void sendEvent(){
    onScanningResult();
  }

  @ReactMethod
  public void testAndroidCallbackMethod(String msg, Callback callback){
    Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_LONG).show();
    callback.invoke("abc");
  }

  @ReactMethod
  public void textAndroidPromiseMethod(String msg, Promise promise){
    Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_SHORT).show();
    String result="謝漢杰";
    promise.resolve(result);
  }

  public void onScanningResult(){
    WritableMap params = Arguments.createMap();
    params.putString("key", "myData");
    sendEvent(getReactApplicationContext(),"EventName",params);
  }

  public static void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
    reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);
  }

  public void nativeCallRn(){
    onScanningResult();
  }

  @Override
  public boolean canOverrideExistingModule() {
    return true;
  }
}

在上面的Module代碼中,getName()方法返回的名字是是在RN代碼里面是需要這個(gè)名字來(lái)調(diào)用該類(lèi)的方法,而@ReactMethod注解下的方法是我們自定義方法,表明這個(gè)方法可以被rn調(diào)用.至于上面四種形式的方法等步驟走完詳解。

自定義ReactPackage 代碼如下：

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class ExampleReactNativePackage implements ReactPackage{

  public ToastExample toastExample;
  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    toastExample=new ToastExample(reactContext);
    modules.add(toastExample);
    return modules;
  }

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }
}

這一步很簡(jiǎn)單，就是把上面的ToastExample類(lèi)加入NativeModule而已

接著第三步也很簡(jiǎn)單，代碼如下

import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import java.util.Arrays;
import java.util.List;
public class MyApplication extends Application implements ReactApplication{
  public static final ExampleReactNativePackage exampleReactNativePackage=new ExampleReactNativePackage();
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          exampleReactNativePackage
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }
}

這也不也只是把ExampleReactNativePackage添加進(jìn)ReactPackage而已，也很簡(jiǎn)單。

為此整個(gè)Android原生端已經(jīng)完成編寫(xiě)。接著就是編寫(xiě)js端，下面也是js端的實(shí)例:(說(shuō)句廢話，我一般喜歡貼全部代碼在一一講解,這樣比較連貫)

import React from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 TouchableOpacity,
 ToastAndroid,
 NativeModules,
 DeviceEventEmitter
} from 'react-native';

export default class HelloWorld extends React.Component {

  constructor(props){
    super(props);
    this.state={
       text1:'ToastForAndroid',
       text2:'testAndroidCallbackMethod',
       text3:'textAndroidPromiseMethod',
       text4:'DeviceEventEmitter',
       text5:'getValue',
       data:'no_data',
    }
  }

  componentWillMount() {
    DeviceEventEmitter.addListener('EventName', function (msg) {
      console.log(msg);
      let rest=NativeModules.ToastForAndroid.MESSAGE;
      ToastAndroid.show("DeviceEventEmitter收到消息:" + "\n" + rest, ToastAndroid.SHORT)
    });
    NativeModules.ToastForAndroid.getDataFromIntent((result)=>{
      this.setState({data:result});
    });
  }

  render() {
   return (
     <View style={styles.container}>
      <Text>{this.state.data}</Text>
      <TouchableOpacity onPress={this._onPressButton.bind(this)}>
         <Text style={styles.hello}>{this.state.text1}</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={this._onPressButton2.bind(this)}>
         <Text style={styles.hello}>{this.state.text2}</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={this._onPressButton3.bind(this)}>
         <Text style={styles.hello}>{this.state.text3}</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={this._onPressButton4.bind(this)}>
         <Text style={styles.hello}>{this.state.text4}</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={this._onPressButton5.bind(this)}>
         <Text style={styles.hello}>{this.state.text5}</Text>
      </TouchableOpacity>
     </View>
    )
  }
  _onPressButton(){
    NativeModules.ToastForAndroid.show(1000);
  }
  _onPressButton2(){    NativeModules.ToastForAndroid.testAndroidCallbackMethod("HelloJack",(result)=>{
      this.setState({text:result});
    });
  }
  _onPressButton3(){    NativeModules.ToastForAndroid.textAndroidPromiseMethod("abcx").then((result)=>{
         this.setState({text3:result});
       }).catch((error)=>{
         this.setState({text:'error'});
       })
  }
  _onPressButton4(){
    NativeModules.ToastForAndroid.sendEvent();
  }
  _onPressButton5(){
     ToastAndroid.show(NativeModules.ToastForAndroid.MESSAGE, ToastAndroid.SHORT)
  }

}
  var styles = StyleSheet.create({
   container: {
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'column',
   },
   hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
   },
  });
AppRegistry.registerComponent('HelloWorlds', () => HelloWorld);

這就是整個(gè)js端的調(diào)用實(shí)例。在React Naitve層，RN端可通過(guò) NativeModules.[module名].[方法名]來(lái)調(diào)起原生的方法，同時(shí)也可以通過(guò)RN端可通過(guò) NativeModules.[module名].[參數(shù)名]的方式來(lái)獲取傳遞的參數(shù)，具體用法如上代碼。

而對(duì)于原生調(diào)用調(diào)用React Native里面的方法，我們可以用RCTDeviceEventEmitter的方式，這種方式就相當(dāng)于我們Android中的廣播，具體對(duì)應(yīng)的原生代碼如下：

MyApplication.exampleReactNativePackage.toastExample.nativeCallRn();

和上面的代碼也是連貫一起的。

最后總結(jié)交互的四種方式

第一種最簡(jiǎn)單，如上面代碼的

@ReactMethod
 public void show(int duration){
  Toast.makeText(getReactApplicationContext(),"message:"+duration,duration).show();
 }

即用ReactMethod注解方法就可以調(diào)用原生了

Callback 回調(diào)方式，如上面代碼的

@ReactMethod
 public void testAndroidCallbackMethod(String msg, Callback callback){
  Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_LONG).show();
    callback.invoke("abc");
}

對(duì)應(yīng)的js代碼就是

_onPressButton2(){
  NativeModules.ToastForAndroid.testAndroidCallbackMethod("HelloJack",(result)=>{
      this.setState({text:result});
  });
}

即你傳入?yún)?shù)進(jìn)行操作然后給你回調(diào)結(jié)果

3.Promise 回調(diào)方式類(lèi)似的就是RxJava.可以通過(guò)鏈?zhǔn)綄?fù)雜代碼結(jié)構(gòu)轉(zhuǎn)換為簡(jiǎn)短易讀的代碼.，如上面代碼的

@ReactMethod
  public void textAndroidPromiseMethod(String msg, Promise promise){
    Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_SHORT).show();
    String result="謝漢杰";
    promise.resolve(result);
  }

對(duì)應(yīng)的js代碼就是

_onPressButton3(){
    NativeModules.ToastForAndroid.textAndroidPromiseMethod("abcx").then((result)=>{
         this.setState({text3:result});
       }).catch((error)=>{
         this.setState({text:'error'});
       })
  }

JS端通過(guò)then接口來(lái)獲取Promise的數(shù)據(jù),執(zhí)行錯(cuò)誤就返回error信息

通過(guò)事件方式：RCTDeviceEventEmitter，一般是native原生調(diào)用React Native 相當(dāng)于廣播。對(duì)應(yīng)上面代碼如下：

public static void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
    reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);
  }

對(duì)應(yīng)的js代碼就是

DeviceEventEmitter.addListener('EventName', function (msg) {
      console.log(msg);
      let rest=NativeModules.ToastForAndroid.MESSAGE;
      ToastAndroid.show("DeviceEventEmitter收到消息:" + "\n" + rest, ToastAndroid.SHORT)
  });

Native發(fā)送原生事件然后React Native 注冊(cè)監(jiān)聽(tīng)獲取信息。

在這里舉一個(gè)我們實(shí)戰(zhàn)的一個(gè)例子，就是啟動(dòng)RN界面并且傳遞數(shù)據(jù)。怎么做呢，剛開(kāi)始的初學(xué)者還是一下子反應(yīng)不過(guò)來(lái)，起始也很簡(jiǎn)單，充分運(yùn)用我們上面的例子就行了，

首先原生啟動(dòng)代碼

Intent intent=new Intent(MainActivity.this,HelloReactActivity.class);
intent.putExtra("data","HelloJack");
startActivity(intent);

最終要的是是在上面 的ToastExample類(lèi)里加入

@ReactMethod
  public void getDataFromIntent(Callback callback){
    try{
      Activity currentActivity=getCurrentActivity();
      String result =currentActivity.getIntent().getStringExtra("data");
      if(TextUtils.isEmpty(result)){
        callback.invoke("no_data");
      }else{
        callback.invoke(result);
      }
    }catch (Exception e){
      callback.invoke("error");
    }
  }

然后在RN端獲取即可

NativeModules.ToastForAndroid.getDataFromIntent((result)=>{
  this.setState({data:result});
});

同理其他情況請(qǐng)參考RN之Android:原生界面與React界面的相互調(diào)用及數(shù)據(jù)傳遞 ,這也是我的參考之一。

最后獻(xiàn)上大家最期待的源碼 https://github.com/jack921/ReactNativeParam 還有什么不明白就開(kāi)源碼吧

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論

依兰县| 休宁县| 囊谦县| 鄂尔多斯市| 潍坊市| 即墨市| 当涂县| 邵武市| 金平| 巢湖市| 锡林浩特市| 盐城市| 马山县| 三门县| 保定市| 思茅市| 乌鲁木齐县| 鄂州市| 达孜县| 四平市| 佳木斯市| 元谋县| 九江市| 老河口市| 凭祥市| 南汇区| 多伦县| 鞍山市| 七台河市| 左权县| 安西县| 永靖县| 交口县| 彰化市| 榆树市| 景东| 边坝县| 丹江口市| 孟津县| 兴安县| 深水埗区|