ReactNative跳转Android原生界面

2018-01-27  本文已影响174人  zzl93

参照这篇文章1写就可以,另外可以看看GSY写的RN系列创建你的Moudle实现自定义交互部分
需要注意的地方:
实现一个React Native应用,有两种方法:
1、一种直接继承ReactActivity,指定js中需要加载的组件名字。
2、在布局中加入ReactRootView,通过ReactInstanceManager加载管理js。
上述文章1链接是采用方法1 我是采用方法2

最后将你的ReactPackage添加到你的ReactNativeHost或者ReactInstanceManager中。
我是添加到ReactInstanceManager中.。上述文章1链接是添加到ReactNativeHost中。

public class MyIntentModule extends ReactContextBaseJavaModule {

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

   @Override
   public String getName() {
       return "IntentMoudle";
   }
   //注意:记住getName方法中的命名名称,JS中调用需要

   @ReactMethod
   public void startActivityFromJS(String productId){
       Activity currentActivity = getCurrentActivity();
       if(null!=currentActivity){
           Activity4ProductDetail.getInstance(currentActivity,productId);
       }

   }
   @ReactMethod
   public void dataToJS(Callback successBack, Callback errorBack){
       try{
           Activity currentActivity = getCurrentActivity();
           String result = currentActivity.getIntent().getStringExtra("data");
           if (TextUtils.isEmpty(result)){
               result = "没有数据";
           }
           successBack.invoke(result);
       }catch (Exception e){
           errorBack.invoke(e.getMessage());
       }
   }
//注意:startActivityFromJS、dataToJS方法添加RN注解(@ReactMethod),否则该方法将不被添加到RN中
}
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.bundle")
                .setJSMainModuleName("index")
                .addPackage(new MainReactPackage())
                .addPackage(new MyReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        // 注意这里的MyReactNativeApp必须对应“index.android.js”中的
        // “AppRegistry.registerComponent()”的第一个参数
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }
    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy();
        }
    }
}
/**
 * 注册模块
 */
public class MyReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(new MyIntentModule(reactContext));
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

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

猜你喜欢

热点阅读