Android原生跳转React不同页面（undefined is not an object）-白红宇

Android原生跳转React不同页面（undefined is not an object）

阅读量：6323 次

发布时间：2019-06-22

本文共 5413 字，大约阅读时间需要 18 分钟。

继续上篇文章的demo，由于现在的项目是原生的，打算用部分页面试下react native,那么问题来了：react貌似只有一个入口 index.android.js，那么在不同的原生页面需要跳转到不同的页面怎么解决呢？

　　这里小主网上转了下，想了一个办法，原生向react传递数据，根据不同数据在index.android.js中跳转不同的页面，竟然要传递数据，那么就涉及到原生于JS的交互了：

　　小主这里使用的是经典的CallBack方式：

　　第一步创建module：

public class JsAndroidModule extends ReactContextBaseJavaModule {    private static final String MODULE_NAME = "JsAndroid";    private Context mContext = null;    public JsAndroidModule(ReactApplicationContext reactContext) {        super(reactContext);        mContext = reactContext;    }    @Override    public String getName() {        return MODULE_NAME;    }    @ReactMethod    public void jsActivity(Callback successBack, Callback erroBack) {        try {            Activity currentActivity = getCurrentActivity();            int result = currentActivity.getIntent().getIntExtra("data", 0);//会有对应数据放入            successBack.invoke(result);        } catch (Exception e) {            erroBack.invoke(e.getMessage());        }    }}

这里注意：小主是从一个原生的activity跳转到activity2(react页面)

代码如下:

protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        findViewById(R.id.text1).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Intent intent = new Intent(MainActivity.this, Main2Activity.class);                intent.putExtra("data", 1);                startActivity(intent);            }        });        findViewById(R.id.text2).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Intent intent = new Intent(MainActivity.this, Main2Activity.class);                intent.putExtra("data", 2);                startActivity(intent);            }        });    }

JsAndroidModule getcurrentActiviey().getIntent().getIntExtra("data", 0) 获取的data正是这里传入的。

Main2Activity的代码：

public class Main2Activity extends Activity implements DefaultHardwareBackBtnHandler {    private ReactRootView mReactRootView;    private ReactInstanceManager mReactInstanceManager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);//        setContentView(R.layout.activity_main2);        try {            mReactRootView = new ReactRootView(this);            mReactInstanceManager = ReactInstanceManager.builder()                    .setApplication(getApplication())                    .setBundleAssetName("index.android.bundle")                    .setJSMainModuleName("index.android")                    .addPackage(new MainReactPackage())                    .addPackage(new JsReactPackage())                    .setUseDeveloperSupport(BuildConfig.DEBUG)                    .setInitialLifecycleState(LifecycleState.RESUMED)                    .build();            mReactRootView.startReactApplication(mReactInstanceManager, "reactnative", null);            setContentView(mReactRootView);        } catch (Exception e) {            Log.e(this.getClass().getName(), e.getCause().getMessage());        }    }    @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(this);        }    }    @Override    public void invokeDefaultOnBackPressed() {        super.onBackPressed();    }}

这里同样要注意一点： Activity一定要继承 DefaultHardwareBackBtnHandler，不然JsAndroidModule 中 getcurrentactivity() 为null.

第二步创建package：

public class JsReactPackage implements ReactPackage {    @Override    public List
     
       createNativeModules(ReactApplicationContext reactContext) {        List
      
        modules = new ArrayList<>();        modules.add(new JsAndroidModule(reactContext));        return modules;    }    @Override    public List
       
        > createJSModules() {        return Collections.emptyList();    }    @Override    public List
        
          createViewManagers(ReactApplicationContext reactContext) {        return Collections.emptyList();    }}

第三步添加package,注意这里有坑！！:

第四步JS调用：

constructor(props) {        super(props);        this.state = {            pageIndex: 0        }        this.getNativeData();    }    getNativeData() {        NativeModules.JsAndroid.jsActivity(            (successMsg) => {                this.setState({                        pageIndex: successMsg                    }                );            },            (erroMsg) => {                alert(erroMsg)            }        );    }

render() {
       var defaultName = 'MainPage';     var defaultComponent = MainPage;     console.log(this.state.pageIndex);     if (this.state.pageIndex == 1) {　　//根据传递过来的数据跳转不同的页面         return (
     );     } else {
           return (
     );     } }

网上各种demo将添加package的方式都放在application的host里面，可能是受的影响，毕竟官方也是这么写的...如果把添加package的动作放到applicationhost那么js调用的是用会报错：

正确的姿势，将添加package的动作放在当前的activity中，Main2Activity：

好了这次就到这里吧~~

转载于:https://www.cnblogs.com/no-coding/p/6401648.html

你可能感兴趣的文章