React Native之学习篇二

向JavaScript发送事件

本地模块可以向JavaScript发送事件而不用直接调用。 最简单的方法是使用RCTDeviceEventEmitter，它可以从ReactContext获得，如下面的代码片段所示。

.. 

private void sendEvent(ReactContext reactContext, 

                                      String eventName, 

                                      @Nullable WritableMap params) { 

 reactContext 

          .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) 

          .emit(eventName, params); 

} 

…

 WritableMap params = Arguments.createMap(); 

… 

sendEvent(reactContext, "keyboardWillShow", params);

然后JavaScript模块可以通过使用Subscribable mixin的addListenerOn来注册接收事件。

import { DeviceEventEmitter } from 'react-native’;

 …

 var ScrollResponderMixin = {

     mixins: [Subscribable.Mixin], 

     componentWillMount: function() {

     …

     this.addListenerOn(DeviceEventEmitter,

                                'keyboardWillShow’,

                                this.scrollResponderKeyboardWillShow);

     …

    },

    scrollResponderKeyboardWillShow:function(e: Event) { 

    this.keyboardWillOpenTo = e; this.props.onKeyboardWillShow && this.props.onKeyboardWillShow(e);

   },

您也可以直接使用DeviceEventEmitter模块来监听事件。

… 

componentWillMount: function() { 

   DeviceEventEmitter.addListener('keyboardWillShow', function(e: Event) { 

     // handle event. 

 }); }

...

从startActivityForResult获取Activity结果

如果要从startActivityForResult开始的活动中获取结果，则需要监听onActivityResult。 为此，您必须扩展BaseActivityEventListener或实现ActivityEventListener。 前者是首选，因为API更改更具弹性。 然后，你需要在模块的构造函数中注册监听器。

reactContext.addActivityEventListener(mActivityResultListener);

现在，您可以通过执行以下方法来监听onActivityResult：

@Override

public void onActivityResult(

  final Activity activity,

  final int requestCode,

  final int resultCode,

  final Intent intent) {

  // Your logic here

}

我们将实现一个简单的图像选择器来演示这一点。 图像选择器会将方法pickImage暴露给JavaScript，这将在调用时返回图像的路径。

public class ImagePickerModule extends ReactContextBaseJavaModule {

  private static final int IMAGE_PICKER_REQUEST = 467081;
  private static final String E_ACTIVITY_DOES_NOT_EXIST = "E_ACTIVITY_DOES_NOT_EXIST";
  private static final String E_PICKER_CANCELLED = "E_PICKER_CANCELLED";
  private static final String E_FAILED_TO_SHOW_PICKER = "E_FAILED_TO_SHOW_PICKER";
  private static final String E_NO_IMAGE_DATA_FOUND = "E_NO_IMAGE_DATA_FOUND";

  private Promise mPickerPromise;

  private final ActivityEventListener mActivityEventListener = new BaseActivityEventListener() {

    @Override
    public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent intent) {
      if (requestCode == IMAGE_PICKER_REQUEST) {
        if (mPickerPromise != null) {
          if (resultCode == Activity.RESULT_CANCELED) {
            mPickerPromise.reject(E_PICKER_CANCELLED, "Image picker was cancelled");
          } else if (resultCode == Activity.RESULT_OK) {
            Uri uri = intent.getData();

            if (uri == null) {
              mPickerPromise.reject(E_NO_IMAGE_DATA_FOUND, "No image data found");
            } else {
              mPickerPromise.resolve(uri.toString());
            }
          }

          mPickerPromise = null;
        }
      }
    }
  };

  public ImagePickerModule(ReactApplicationContext reactContext) {
    super(reactContext);

    // Add the listener for `onActivityResult`
    reactContext.addActivityEventListener(mActivityEventListener);
  }

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

  @ReactMethod
  public void pickImage(final Promise promise) {
    Activity currentActivity = getCurrentActivity();

    if (currentActivity == null) {
      promise.reject(E_ACTIVITY_DOES_NOT_EXIST, "Activity doesn't exist");
      return;
    }

    // Store the promise to resolve/reject when picker returns data
    mPickerPromise = promise;

    try {
      final Intent galleryIntent = new Intent(Intent.ACTION_PICK);

      galleryIntent.setType("image/*");

      final Intent chooserIntent = Intent.createChooser(galleryIntent, "Pick an image");

      currentActivity.startActivityForResult(chooserIntent, IMAGE_PICKER_REQUEST);
    } catch (Exception e) {
      mPickerPromise.reject(E_FAILED_TO_SHOW_PICKER, e);
      mPickerPromise = null;
    }
  }
}

监听生命周期的事件

听取活动的LifeCycle事件，如onResume，onPause等与我们如何实现ActivityEventListener非常相似。 该模块必须实现LifecycleEventListener。 然后，你需要在模块的构造函数中注册一个监听器

reactContext.addLifecycleEventListener(this);

现在，您可以通过执行以下方法来收听活动的LifeCycle事件：

@Override

public void onHostResume() {

    // Activity `onResume`

}

@Override

public void onHostPause() {

    // Activity `onPause`

}

@Override

public void onHostDestroy() {

    // Activity `onDestroy`

}

 

 

转载于:https://my.oschina.net/todaybamboo/blog/1608356