美文网首页
ReactNative跳转Android原生界面

ReactNative跳转Android原生界面

作者: zzl93 | 来源:发表于2018-01-27 20:19 被阅读174次

    参照这篇文章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();
        }
    }
    

    相关文章

      网友评论

          本文标题:ReactNative跳转Android原生界面

          本文链接:https://www.haomeiwen.com/subject/geloaxtx.html