温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

ReactNative入门之android与rn初始化参数的传递

发布时间:2020-07-29 19:07:46 来源:网络 阅读:2311 作者:sendoffice 栏目:移动开发

1、基本理念

RN APP本质上也是原生APP,只是在原生APP中加入了React Native视图的支持。
因此获取RN APP的启动参数的方法原生APP是一样的,获取启动参数后再通过合适的方法传递给RN视图。
如何获得启动参数,不要再搜索RN如何获得启动参数,直接参考原生APP获得启动参数的文章。
可以参考这个例子:
ndroid中一个APP启动另一个APP并传递参数

本文重点说明如何将启动参数传递给React Native代码。

2、ReactNative的Ativity继承关系

    MainActivity --> ReactActivity --> Activity

3、参数传递的原理及实现

下面重点介绍如何将获取的启动参数传递给RN视图。
重点阅读 ReactActivity 类中的如下代码:

    public abstract class ReactActivity extends Activity
            implements DefaultHardwareBackBtnHandler, PermissionAwareActivity {

                 //定义私有变量mDelegate
                 private final ReactActivityDelegate mDelegate;

              //在构造函数中创建mDelegate
                protected ReactActivity() {
                    mDelegate = createReactActivityDelegate();
                }

                 //创建mDelegate的方法,这里注释很清楚,可以重写该方法并自定义delegate
                /**
                 * Called at construction time, override if you have a custom delegate implementation.
                */
                protected ReactActivityDelegate createReactActivityDelegate() {
                        return new ReactActivityDelegate(this, getMainComponentName());
                }

            //关键的地方,mDelegate.loadApp创建了React Native视图,并传入参数。
            //具体见mDelegate.loadApp的代码。
                protected final void loadApp(String appKey) {
                        mDelegate.loadApp(appKey);
                }
        }

loadApp方法所调用的mDelegate.loadApp 方法,是创建React 视图并传入参数的核心代码所在:

                    public class ReactActivityDelegate {
                                //....
                                protected void loadApp(String appKey) {
                                        if (mReactRootView != null) {
                                            throw new IllegalStateException("Cannot loadApp while app is already running.");
                                        }
                                        mReactRootView = createRootView();
                                        mReactRootView.startReactApplication(
                                            getReactNativeHost().getReactInstanceManager(),
                                            appKey,
                                            getLaunchOptions());
                                        getPlainActivity().setContentView(mReactRootView);
                                    }
                            //....
                    }
    }

注意: startReactApplication函数的最后一个参数getLaunchOptions()返回值是传给ReactView的参数,我们要在这里把启动参数传入。看看getLaunchOptions()的实现:

        protected @Nullable Bundle getLaunchOptions() {
                return null;
            }

什么也没返回,这简直太好了,我们只要在这里把我们的初始化参数给他就行了。

以上都是基础原理的准备,如果觉得有些晦涩,直接看如下的具体实现代码就可以了。

            public class MainActivity extends ReactActivity {

                    //重写这个方法,返回自定义的delegate.
                    @Override
                    protected ReactActivityDelegate createReactActivityDelegate() {
                            return new MyReactDelegate(this,getMainComponentName());
                    }

                    //自定义MyReactDelegate
                    class  MyReactDelegate extends ReactActivityDelegate {

                            public MyReactDelegate(Activity activity, @javax.annotation.Nullable String mainComponentName) {
                                    super(activity, mainComponentName);
                            }

                            //重点是重写这个方法,把启动参数在这里准备好。
                            @javax.annotation.Nullable
                            @Override
                            protected Bundle getLaunchOptions() {
                                  //获取传入的参数
                                    Intent intent     = getIntent();
                                    String data_str = intent.getStringExtra("data");
                                    Bundle bundle = new Bundle();
                                    //bundle.putString("bundle","android传递的初始化参数");
                                    bundle.putString("data",data_str);
                                    return bundle;
                            }
                    }
            }

4、在ReactView中使用参数

在React Native 代码的render方法中使用传入的参数:

     render() { 
         var  initProps = this.props.bundle;
         return( <Text style={styles.text_hello}{initProps}</Text>);
     }

结束

本文整理自:
ReactNative入门之android与rn初始化参数的传递
原作写的很好~~~ 我这里只是整理,便于以后学习参考。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI