【React Native源碼分析】Fragment中使用RN

效果圖

jjj.gif

這里的“時(shí)空”頁面除了上面的tab欄,其余完全是RN寫的,然后嵌入Fragment使用,剛開始接到這個(gè)需求的時(shí)候,心里十萬個(gè)不情愿,由于之前項(xiàng)目里面都是在Activity里面使用,而且React Native并沒有提供直接在Fragment使用的基類,那么我們要怎么實(shí)現(xiàn)呢?

思考

了解React Native基本原理,應(yīng)該知道,React Native無非是把js文件解析出來,然后映射成Android原始的組件,然后加入到布局里面,只要明白這一點(diǎn),那么我們模仿React Native中使用Activity加載RN的流程。

Activity加載View流程

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

  • 模仿ReactFragmentActivity的實(shí)現(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實(shí)例
      protected ReactActivityDelegate createReactActivityDelegate() {
         return new ReactActivityDelegate(this, getMainComponentName());
      }
      
      需要傳入兩個(gè)參數(shù),第一個(gè)就是當(dāng)前“Activity”,第二個(gè)是個(gè)String對象,代表當(dāng)前要加載的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了,既然是這樣,那么只要我們能拿到這個(gè)View對象,那么就可以做很多事情了。

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

完整代碼

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。