React Native0.61 진급과 안드로이드 단말기 메시지 전달

전재:https://blog.csdn.net/u013718120/article/details/55506238
RN이 Andorid와 통신하는 방식은 대략 다음과 같은 네 가지로 요약된다.

RCTDeviceEventEmitter 이벤트 방식

Callback 콜백 방식

Promise Trust 방식

직전 상량 데이터

 
장점과 단점:
1. RCTDeviceEventEmitter
장점: 임의의 시간에 전달할 수 있고 Native가 주도적으로 제어할 수 있다.
2. Callback
장점: JS 호출, Native 반환.
단점: CallBack은 비동기식 작업이므로 반환 시기가 불확실합니다.
3. Promise
장점: JS 호출, Native 반환.
단점: 매번 사용할 때마다 JS 호출이 필요합니다
삼자의 통신 방식을 이해했는데, 어떻게 코드의 설명을 줄일 수 있겠는가!코드가 어떻게 실현되는지 봅시다.대략적인 실현 절차는 다음과 같다.
(1) Module 클래스 정의,ReactContextBaseJavaModule 계승
Module 클래스에서 우리는 RN이 Native를 호출하는 방법, Native가 RN을 호출하는 방법 등 상호작용하는 방법을 정의한다.
(2) Package 클래스 정의, ReactPackage 상속
Package의createNativeModules 방법을 실현하고 Module 실례를 집합에 추가합니다.
(3) Application 정의, Reactapplication 상속
getPackages 방법을 실현하고 Package 실례를 getPackages 아래의 집합에 추가합니다.
4. 직전 상수 데이터(기본방향 RN)
도메인 간 전송 값은 원본에서 RN으로만 전달할 수 있습니다.RN 끝은 NativeModules를 통해 사용할 수 있습니다.[module 이름].[매개 변수 이름]으로 가져오기
1. Module 클래스의 핵심 코드

    /**
     *  rn                   
     * @return
     */
    @Override
    public String getName() {
        return MODULE_NAME;
    }

명칭은 사용자 정의할 수 있고, 연결할 때 협상하면 된다.

    /**
     * RN  Native   
     * @param phone
     */
    @ReactMethod
    public void rnCallNative(String phone) {
 
        //         
        Intent intent = new Intent();
        intent.setAction(Intent.ACTION_CALL);
        intent.setData(Uri.parse("tel:" + phone));
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); //       flag,     
        mContext.startActivity(intent);
    }

 
module에서 방법을 정의하고 @ReactMethod 주석으로 표시합니다. 이 방법은 RN에서 호출될 것입니다.즉, RN에서 호출되는 기본 메모는 @ReactMethod 메모 마크업을 사용해야 합니다.
참고: RN 레이어에서 Native 레이어를 호출하여 인터페이스 점프를 수행하려면 FLAG 를 설정해야 합니다.ACTIVITY_NEW_TASK 플래그입니다. 그렇지 않으면 오류가 발생합니다.

    /**
     * Native  RN
     * @param msg
     */
    public void nativeCallRn(String msg) {
        mContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit(EVENT_NAME,msg);
    }

위 코드는 Android 레이어에서 RN 레이어를 호출하는 기본 방법을 정의합니다.emit에서 메시지를 보내려면 ReactContext의 getJSmodule 메서드를 사용합니다.마찬가지로 emit의 첫 번째 파라미터는 RN 층의 addListener 방법의 첫 번째 파라미터와 같아야 한다.
2. Package의 핵심 코드 사용자 정의

/**
 *   Package 
 * 
 */
public class CommPackage implements ReactPackage {
 
    public CommModule mModule;
 
    /**
     *   Native Module
     * @param reactContext
     * @return
     */
    @Override
    public List createNativeModules(ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();
        mModule = new CommModule(reactContext);
        modules.add(mModule);
        return modules;
    }
 
    @Override
    public List> createJSModules() {
        return Collections.emptyList();
    }
 
    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

createNativeModules 방법에서 집합을 초기화하고 모듈 실례를 집합에 추가하여 집합 실례를 되돌려줍니다.
3. Application 핵심 코드
private static final CommPackage mCommPackage = new CommPackage();

   /**
     *    reactPackage
     * @return
     */
    public static CommPackage getReactPackage() {
        return mCommPackage;
    }

 
getPackages 방법에서 Package 실례를 Arrays에 추가하면 등록을 완료할 수 있습니다.지금까지 Android Layer Core 구성은 React Native Layer Core 코드를 살펴보았습니다.
1. 원본 코드 호출

   /**
    *       
    */
    skipNativeCall() {
       let phone = '18637070949';
       NativeModules.commModule.rnCallNative(phone);
    }

React Native 레이어에서 Native Modules를 통해commModule를 호출한 다음 기본 방법을 호출하면 됩니다.참고: commModule은 Module 클래스의 getNames 메서드가 반환하는 이름과 일치합니다.
2. 기본 호출 수신

   /**
    *       
    */
   componentDidMount() {
       DeviceEventEmitter.addListener('nativeCallRn',(msg)=>{
            title = "React Native  ,    ：" + msg;
            ToastAndroid.show("    ", ToastAndroid.SHORT);
       })
   }

DeviceEventEmitter를 통해 감청을 등록합니다. 안드로이드의 감청 이벤트와 유사합니다.첫 번째 매개변수는 Module의 emit Event Name과 같은 이름을 식별합니다.두 번째 파라미터는 처리를 위해 되돌아간다.
3. 인터페이스 코드

 render() {
    return (
      
        
            {title}
        
         
                   
         
        
         
      
    );
  }

Text에서 클릭 이벤트를 등록하면 RN 레이어가 기본 코드를 호출하여 다이얼 업 인터페이스로 이동합니다.
4. Android 레이어에서 RN을 호출하는 코드

    /**
     *  RN    
     * @param v
     */
    public void sendMsgToRN(View v) {
        Log.e("---","sendMsgToRN");
        MainApplication.getReactPackage().mModule.nativeCallRn("hello");
    }

Module에서 정의한 nativeCallRn 방법을 호출하고 RN 층 코드를 출발합니다.지금까지 RCTDeviceEventEmitter 모드를 통해 통신 상호작용을 했습니다.상호작용은 모두 주동적인 방식을 위주로 한다는 것을 분명히 알 수 있다.
RN에 남은 두 가지 통신 방식에는 공통된 특징이 있다.
RN 레이어에서 Native 레이어를 호출하고 Native 레이어 처리가 완료되면 RN 레이어를 리콜합니다.
직접 코드 구현:
(1)Callback
또한 Module 클래스에서 상호 작용 방법을 정의합니다.

    /**
     * Callback   
     * rn  Native,      
     * @param msg
     * @param callback
     */
    @ReactMethod
    public void rnCallNativeFromCallback(String msg, Callback callback) {
 
        // 1.      ...
        String result = "    ：" + msg;
        // 2.  RN,         RN
        callback.invoke(result);
    }

RN에서 콜백을 정의합니다.

   /**
    * Callback     
    */
    callbackComm(msg) {
        NativeModules.commModule.rnCallNativeFromCallback(msg,(result) => {
             ToastAndroid.show("CallBack    :" + result, ToastAndroid.SHORT);
        })
    }

(2)Promise
Module 클래스에서 상호 작용 방법을 정의합니다.

    /**
     * Promise   
     * @param msg
     * @param promise
     */
    @ReactMethod
    public void rnCallNativeFromPromise(String msg, Promise promise) {
 
        Log.e("---","adasdasda");
        // 1.      ...
        String result = "    ：" + msg;
        // 2.  RN,         RN
        promise.resolve(result);
    }

RN에서 콜백을 정의합니다.

    /**
     * Promise     
     */
    promiseComm(msg) {
        NativeModules.commModule.rnCallNativeFromPromise(msg).then(
            (result) =>{
                ToastAndroid.show("Promise    :" + result, ToastAndroid.SHORT)
            }
        ).catch((error) =>{console.log(error)});
    }

레이아웃에서 클릭 이벤트를 트리거하려면 다음과 같이 하십시오.

 
                   
         
         
            Callback    
         
         
            Promise    
         

(3) 직전 상수 데이터(기본방향 RN)
사용자 정의 Module 클래스에서 getConstants를 실현하는 방법

    @Nullable
    @Override
    public Map getConstants() {
        return super.getConstants();
    }

이상은 기본값입니다. getConstants 방법에서 슈퍼가 호출되었습니다.getConstants (), 추적 원본을 볼 수 있습니다

  /**
   * @return a map of constants this module exports to JS. Supports JSON types.
   */
  public @Nullable Map getConstants() {
    return null;
  }

 
원본 주석에서 알 수 있듯이 이 방법은 맵 유형의 상수를 되돌려 JS단(즉 RN)으로 내보내는 것이다.JSON 유형이 지원됩니다.따라서 Map 컬렉션을 선언하고 상수를 추가한 후 다시 쓰는 방법만 있으면 됩니다.그래서 다음과 같은 코드가 생겼어요.

    @Nullable
    @Override
    public Map getConstants() {
        Map params = new HashMap<>();
        params.put("Constant","    ，   RN");
        return params;
    }

이때 RN 쪽에서 Native Modules를 통해 받으면 됩니다.

componentWillMount() {
	let result = NativeModules.MyModule.Constant
}

원본이상 github에 전송, 스타, 팔로우 응원 부탁드립니다~
원본 다운로드