React Js 와 Native 간 의 통신

주요 내용:

통신 에 대한 사고

React Js 와 Native 간 통신 의 세 가지 방식

React Js 와 Native 통신 의 세 가지 방식 비교

React Js 와 Native 간 통신 의 기본 원리

1. 통신 에 대한 사고
1. 프로 세 스 간 통신:
안 드 로 이 드 시스템 에서 응용 프로그램 은 여러 스 레 드 로 구 성 된 프로 세 스 에서 실 행 됩 니 다. 어떤 응용 프로그램 은 하나의 프로 세 스 를 포함 하고, 어떤 응용 프로그램 은 두 개의 프로 세 스, 심지어 여러 개의 프로 세 스 가 있 을 수 있 습 니 다.Android 시스템 에서 흔히 볼 수 있 는 프로 세 스 간 통신 방식 은 Binder, AIDL, Messenger 가 있 습 니 다.
2. 스 레 드 간 통신
Android 에서 스 레 드 와 스 레 드 의 통신 방식 은 'Intent, Handler' 가 있 습 니 다.
3. 전통 적 인 Js 와 안 드 로 이 드 간 의 통신
장면 은 보통 Andoid WebView 와 페이지 에 불 러 온 Js 방법 간 의 통신 으로 addJavascriptInterface 를 사용 하여 이들 의 통신 을 실현 합 니 다.
예 를 들 어 Js 페이지 에서 Android 의 Toast 알림 을 호출 하려 면 이렇게 할 수 있 습 니 다.
Java 단자:

mWebView.addJavascriptInterface(new WebAppInterface(this), "Android");  

public class WebAppInterface {  
        Context mContext;  

        /** Instantiate the interface and set the context */  
        WebAppInterface(Context c) {  
            mContext = c;  
        }  

        //     @JavascriptInterface，  
        /** Show a toast from the web page */  
        @JavascriptInterface  
        public void showToast(String toast) {  
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();  
        }  
    }  

JS 에서 다음 과 같이 호출 합 니 다:

<button onclick="showAndroidToast('addjavascriptinterface');">showAndroidToastbutton>  

<script type="text/javascript">  
  function showAndroidToast(toast) {  
      Android.showToast(toast);  
  }  
script>  

2. React Js 와 Native 간 의 통신 방식 세 가지
React Js 와 Android 의 통신 은 전통 적 인 addJavascriptInterface 방식 을 사용 하지 않 고 세 가지 더 우호 적 인 방식 을 사용 합 니 다. 각각:

CallBack 방식

Promise 리 턴

RCTDeviceEventEmitter 메시지 보 내기

1. CallBack 방식
주요 인터페이스 설명:

/**
 * Interface that represent javascript callback function which can be passed to the native module
 * as a method parameter.
 */
public interface Callback {
  public void invoke(Object... args);
}

사용 방법 은 Android 에서 ReactContextBaseJavaModule 을 계승 하 는 하위 클래스 에 JS 에 사용자 정 보 를 되 돌려 주 는 방법 을 쓰 는 것 입 니 다.

@ReactMethod
    public void callBackTime(String name, Callback callback) {
        callback.invoke(name, getDateAndTime());//invoke          ；

JS 에서 다음 과 같이 호출 하고 받 습 니 다.

<Text style={styles.welcome}
                      onPress={this.getCallBackTime.bind(this)}
                >CallBack     
Text>

getCallBackTime() {
          NativeModules.CommonModule.callBackTime("Allure",
              (msg1, msg2) => {
                  console.log(msg);
                  ToastAndroid.show("CallBack    :" + "
" + msg1 + msg2 , ToastAndroid.SHORT)
              }
          );
  }

2. Promise 리 턴
Android 엔 드 코드 는 다음 과 같 습 니 다.

@ReactMethod
    public void getBasicUserInfo(Promise promise){
        WritableMap map = Arguments.createMap();
        map.putString("user_id", "458");
        map.putString("user_name", "jcstest");
        map.putString("user_city", "  ");
        map.putArray("user_privileges", getPrivilegesWritableArray());
        promise.resolve(map);
    }

JS 엔 드 호출 은 다음 과 같 습 니 다.

<TouchableHighlight onPress={_getUserInfo.bind(this)}>
                      <Text> Promise resolve Text>
        TouchableHighlight>

async function _getUserInfo (){
    const _this = this;
    try {
        ToastAndroid.show("_getUserInfo", ToastAndroid.SHORT);
        const data = await NativeModules.CommonModule.getBasicUserInfo()
        global.currentUser = data || {};
        _this.setState({
            userInfo: data,
            loading: false
        });
        ToastAndroid.show(this.state.userInfo.user_city, ToastAndroid.SHORT);
        ToastAndroid.show(this.state.userInfo.user_privileges[0], ToastAndroid.SHORT);
    } catch (e) {
        ToastAndroid.show(e, ToastAndroid.SHORT);
    }
}

3. RCTDeviceEventEmitter 가 메 시 지 를 보 냅 니 다.
Android 코드 는 다음 과 같 습 니 다.

public void sendTransMission(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
        if(reactContext != null){
            reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                    .emit(eventName, params);
        }
    }

JS 측 수신 메시지 코드 는 다음 과 같 습 니 다.

componentWillMount() {
        this.listener = DeviceEventEmitter.addListener('EventName', function  (msg) {
            console.log(msg);
            ToastAndroid.show("DeviceEventEmitter    :" + "
" + msg.turn + "---" + msg.key, ToastAndroid.SHORT)
        });
    }

    componentWillUnmount(){
      //   
      this.listener.remove();
    }

3. React Js 와 Native 통신 세 가지 방식 의 비교

CallBack 방식: JS 호출, Native 복귀;CallBack 은 비동기 동작 으로 반환 시기 가 불확실 합 니 다.가 변 길이 파 라 메 터 를 지원 합 니 다. 리 셋 시 파 라 메 터 는 순서대로 값 을 추출 합 니 다.

Promise 리 셋 JS 호출, Native 리 턴;다 중 데이터 형식 지원;사용 할 때마다 JS 호출 이 필요 합 니 다

RCTDevice EventEmitter 사건 은 네 이 티 브 가 자발적으로 JS 에 메 시 지 를 보 내 고 JS 는 감청 만 하면 된다.