效果圖

jjj.gif

這里的“時空”頁面除了上面的tab欄杨凑，其余完全是RN寫的，然后嵌入Fragment使用狈定，剛開始接到這個需求的時候漫雷，心里十萬個不情愿瓜富，由于之前項目里面都是在Activity里面使用，而且React Native并沒有提供直接在Fragment使用的基類降盹，那么我們要怎么實現(xiàn)呢与柑？

思考

了解React Native基本原理，應該知道蓄坏，React Native無非是把js文件解析出來价捧，然后映射成Android原始的組件，然后加入到布局里面涡戳，只要明白這一點结蟋，那么我們模仿React Native中使用Activity加載RN的流程。

Activity加載View流程

我們在使用Activity加載RN的時候渔彰，需要讓Activity繼承ReactFragmentActivity（這是RN框架提供類嵌屎，里面封裝了加載RN相關(guān)邏輯）,代碼請自行查看，在Activity各個生命周期里委托給ReactActivityDelegate類胳岂。那接下來第一步就是模仿ReactFragmentActivity的實現(xiàn)编整。

• 模仿ReactFragmentActivity的實現(xiàn)

  public abstract class BaseReactFragment extends Fragment implements PermissionAwareActivity {
    private ReactFragmentDelegate mDelegate;
    private Activity mActivity;
  
    ...
  
    protected ReactFragmentDelegate createReactFragmentDelegate() {
        return new ReactFragmentDelegate(this, getMainComponentName());
    }
  
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mDelegate = createReactFragmentDelegate();
        mActivity = getActivity();
        mDelegate.onCreate(savedInstanceState);
    }
  
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return mDelegate.onCreateView(inflater, container, savedInstanceState);
    }
  
    @Override
    public void onViewCreated(View view,
                              @android.support.annotation.Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }
  
    ...
  }
  

  1. 創(chuàng)建ReactActivityDelegate實例

     protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName());
     }
     

     需要傳入兩個參數(shù)，第一個就是當前“Activity”乳丰，第二個是個String對象，代表當前要加載的RN組件名内贮。
  2. onCreate生命周期重要函數(shù)

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

     • 創(chuàng)建RN根View —— mReactRootView = createRootView()
     • 調(diào)用ReactRootView的startReactApplication方法
     • 調(diào)用getPlainActivity().setContentView(mReactRootView)
       將創(chuàng)建好的ReactRootView 設(shè)置給Activity产园，這樣Acitity顯示的就是設(shè)置的View了汞斧，既然是這樣，那么只要我們能拿到這個View對象什燕，那么就可以做很多事情了粘勒。

其它請自行查看源碼，包括怎么獲取參數(shù)屎即，路徑庙睡，在哪里把js解析成Android原生組件的。

完整代碼