ReactNative入門之a(chǎn)ndroid與rn初始化參數(shù)的傳遞

1、基本理念

RN APP本質(zhì)上也是原生APP，只是在原生APP中加入了React Native視圖的支持。
因此獲取RN APP的啟動參數(shù)的方法原生APP是一樣的，獲取啟動參數(shù)后再通過合適的方法傳遞給RN視圖。
如何獲得啟動參數(shù)，不要再搜索RN如何獲得啟動參數(shù)，直接參考原生APP獲得啟動參數(shù)的文章。
可以參考這個例子：
ndroid中一個APP啟動另一個APP并傳遞參數(shù)

本文重點(diǎn)說明如何將啟動參數(shù)傳遞給React Native代碼。

2、ReactNative的Ativity繼承關(guān)系

    MainActivity --> ReactActivity --> Activity

3、參數(shù)傳遞的原理及實現(xiàn)

下面重點(diǎn)介紹如何將獲取的啟動參數(shù)傳遞給RN視圖。
重點(diǎn)閱讀 ReactActivity 類中的如下代碼：

    public abstract class ReactActivity extends Activity
            implements DefaultHardwareBackBtnHandler, PermissionAwareActivity {

                 //定義私有變量mDelegate
                 private final ReactActivityDelegate mDelegate;

              //在構(gòu)造函數(shù)中創(chuàng)建mDelegate
                protected ReactActivity() {
                    mDelegate = createReactActivityDelegate();
                }

                 //創(chuàng)建mDelegate的方法，這里注釋很清楚，可以重寫該方法并自定義delegate
                /**
                 * Called at construction time, override if you have a custom delegate implementation.
                */
                protected ReactActivityDelegate createReactActivityDelegate() {
                        return new ReactActivityDelegate(this, getMainComponentName());
                }

            //關(guān)鍵的地方，mDelegate.loadApp創(chuàng)建了React Native視圖，并傳入?yún)?shù)。
            //具體見mDelegate.loadApp的代碼。
                protected final void loadApp(String appKey) {
                        mDelegate.loadApp(appKey);
                }
        ｝

loadApp方法所調(diào)用的mDelegate.loadApp 方法，是創(chuàng)建React 視圖并傳入?yún)?shù)的核心代碼所在：

                    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函數(shù)的最后一個參數(shù)getLaunchOptions()返回值是傳給ReactView的參數(shù)，我們要在這里把啟動參數(shù)傳入。看看getLaunchOptions()的實現(xiàn)：

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

什么也沒返回，這簡直太好了，我們只要在這里把我們的初始化參數(shù)給他就行了。

以上都是基礎(chǔ)原理的準(zhǔn)備，如果覺得有些晦澀，直接看如下的具體實現(xiàn)代碼就可以了。

            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);
                            }

                            //重點(diǎn)是重寫這個方法，把啟動參數(shù)在這里準(zhǔn)備好。
                            @javax.annotation.Nullable
                            @Override
                            protected Bundle getLaunchOptions() {
                                  //獲取傳入的參數(shù)
                                    Intent intent     = getIntent();
                                    String data_str = intent.getStringExtra("data");
                                    Bundle bundle = new Bundle();
                                    //bundle.putString("bundle","android傳遞的初始化參數(shù)");
                                    bundle.putString("data",data_str);
                                    return bundle;
                            }
                    }
            }

4、在ReactView中使用參數(shù)

在React Native 代碼的render方法中使用傳入的參數(shù)：

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

結(jié)束

本文整理自：
ReactNative入門之a(chǎn)ndroid與rn初始化參數(shù)的傳遞
原作寫的很好~~~ 我這里只是整理，便于以后學(xué)習(xí)參考。