React native 界面跳转原生Android界面

来源：互联网发布：ubuntu 设置apt源编辑：程序博客网时间：2024/05/26 05:53

最近在学习React native，正好看到RN界面跳转原生的界面，但是根据网上的来总是会报undefined is not an object (evaluating ‘NativeModules.IntentModule.startActivityFromJS’) 异常仔细对照代码都是一样的最后发现你自定义的ReactPackage 需要再你的注册Rn的Activity界面里面添加下。
详细代码如下(ps:我是用的Rn版本为 0.48.3):
1.定义跳转的IntentModule;

import android.app.Activity;import android.content.Intent;import com.facebook.react.bridge.JSApplicationIllegalArgumentException;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.bridge.ReactContextBaseJavaModule;import com.facebook.react.bridge.ReactMethod;/** * Created by ly on 2017/9/27. */public class IntentModule extends ReactContextBaseJavaModule {    public IntentModule(ReactApplicationContext reactContext) {        super(reactContext);    }    @Override    public String getName() {        return "IntentModule";    }//startActivityFromJS这个方法是我们自己写的 然后需要添加@ReactMethod注解 才能让RN调用    @ReactMethod    public void startActivityFromJS(String name, String params) {        try {            Activity currentActivity = getCurrentActivity();            if (null != currentActivity) {                Class toActivity = Class.forName(name);                Intent intent = new Intent(currentActivity, toActivity);                intent.putExtra("params", params);                currentActivity.startActivity(intent);                currentActivity.finish();            }        } catch (Exception e) {            throw new JSApplicationIllegalArgumentException(                    "不能打开Activity : " + e.getMessage());        }    }}

2.定义ReactPackage注册你的IntentModule：

import android.com.reactnativedemo.module.IntentModule;import com.facebook.react.ReactPackage;import com.facebook.react.bridge.NativeModule;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.uimanager.ViewManager;import java.util.Arrays;import java.util.Collections;import java.util.List;/** * Created by ly on 2017/9/27. */public class MyReactPackage implements ReactPackage {    @Override    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {        return Arrays.<NativeModule>asList(new IntentModule(reactContext));    }    @Override    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {        return Collections.emptyList();    }}

3.自定义Application:

import android.app.Application;import com.facebook.react.ReactApplication;import com.facebook.react.ReactNativeHost;import com.facebook.react.ReactPackage;import com.facebook.react.shell.MainReactPackage;import com.facebook.soloader.SoLoader;import java.util.Arrays;import java.util.List;/** * Created by ly on 2017/9/27. */public class App extends Application implements ReactApplication {    @Override    public void onCreate() {        super.onCreate();        SoLoader.init(this, /* native exopackage */ false);    }    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {        @Override        public boolean getUseDeveloperSupport() {            return BuildConfig.DEBUG;        }//添加你的ReactPackage        @Override        protected List<ReactPackage> getPackages() {            return Arrays.asList(                    new MainReactPackage(),                    new MyReactPackage()            );        }    };    @Override    public ReactNativeHost getReactNativeHost() {        return mReactNativeHost;    }}//=====>别忘记在清单文件注册

4.然后别忘记了别忘记了在你集成RN的activity界面里面要添加下你的ReactPackage

import android.content.Intent;import android.net.Uri;import android.os.Build;import android.os.Bundle;import android.provider.Settings;import android.support.v7.app.AppCompatActivity;import android.view.KeyEvent;import com.facebook.react.ReactInstanceManager;import com.facebook.react.ReactRootView;import com.facebook.react.common.LifecycleState;import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;import com.facebook.react.shell.MainReactPackage;public class MainActivity extends AppCompatActivity 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.android.bundle")                .setJSMainModuleName("index.android")                .addPackage(new MainReactPackage())                //这边要添加                .addPackage(new MyReactPackage())                .setUseDeveloperSupport(BuildConfig.DEBUG)                .setInitialLifecycleState(LifecycleState.RESUMED)                .build();        // 注意这里的MyReactNativeApp必须对应“index.android.js”中的        // “AppRegistry.registerComponent()”的第一个参数        mReactRootView.startReactApplication(mReactInstanceManager, "ReactNativeDemo", null);        setContentView(mReactRootView);        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {            if (!Settings.canDrawOverlays(this)) {                Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,                        Uri.parse("package:" + getPackageName()));                startActivityForResult(intent, 1);            }        }    }    @Override    protected void onActivityResult(int requestCode, int resultCode, Intent data) {        if (requestCode == 1) {            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {                if (!Settings.canDrawOverlays(this)) {                    // SYSTEM_ALERT_WINDOW permission not granted...                }            }        }    }    @Override    public void invokeDefaultOnBackPressed() {        super.onBackPressed();    }    @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();        }    }    @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);    }}

5.然后是我的JS代码：

'use strict'import React, {Component} from 'react';import {View, Image} from 'react-native';var Dimensions = require('Dimensions');var width = Dimensions.get('window').width;var height = Dimensions.get('window').height;var {NativeModules} = require('react-native');export default class SplashView extends Component {    componentDidMount() {        this.timer = setTimeout(() => {//这边就是跳转的地方            NativeModules.IntentModule.startActivityFromJS("android.com.reactnativedemo.TestActivity", "跳转传参")        }, 3000);    }    render() {        let picUrl = {uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506482681622&di=409d9146bcf7fc741787753c8d06a118&imgtype=0&src=http%3A%2F%2Fimg.juweixin.com%2Farticle%2F2016%2F1104%2Ft_986c087f4b8a27e4831bc216412fda0b.jpg'};        return (            <View style={{flex: 1}}>                <Image source={picUrl} style={{width: width, height: height}} resizeMode={Image.resizeMode.cover}/>            </View>        );    }    componentUnmount(){    this.timer && clearTimeout(this.timer);    }}

阅读全文

1 0