React Native 官網(wǎng)提供了在 Activity 中使用 React Native 組件的方法，最近項(xiàng)目需要在 Fragment 中使用 React Native 組件墨闲，參考 http://stackoverflow.com/questions/35221447/react-native-inside-a-fragment 及各種嘗試摸索后總結(jié)方法如下栏渺。
1. MyApplication
MyApplication 除了實(shí)現(xiàn) ReactApplication 的抽象方法 getReactNativeHost 外早歇，還需要獲取到 ReactContext 并提供 get 接口，因?yàn)樵?Fragment 里無法獲取到 ReactContext，只能獲取 Context令花，而原生調(diào)用 js 時(shí)使用 sendEvent 又需要用到 ReactContext锦担。
Fragment 中通過
ReactInstanceManager#getCurrentReactContext獲取到的ReactContext為空俭识。
public class MyApplication implements ReactApplication {
// ...
private ReactContext mReactContext;
public ReactContext getReactContext() {
return mReactContext;
}
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MyReactPackage(),
new OtherReactPackage()
// ...
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
private void registerReactInstanceEventListener() {
mReactNativeHost.getReactInstanceManager().addReactInstanceEventListener(mReactInstanceEventListener);
}
private void unRegisterReactInstanceEventListener() {
mReactNativeHost.getReactInstanceManager().removeReactInstanceEventListener(mReactInstanceEventListener);
}
private final ReactInstanceManager.ReactInstanceEventListener mReactInstanceEventListener = new ReactInstanceManager.ReactInstanceEventListener() {
@Override
public void onReactContextInitialized(ReactContext context) {
mReactContext = context;
}
};
@Override
public void onCreate() {
// ...
registerReactInstanceEventListener();
}
}
在 Application 的 onCreate 方法里注冊(cè)一個(gè) ReactInstanceEventListener，用于初始化后獲取到 ReactContext洞渔。
2. ReactInstanceManager
通過 ReactNativeHost#getReactInstanceManager 可以獲取 ReactInstanceManager 這個(gè)抽象類套媚，它提供了 ReactInstanceEventListener 接口及相應(yīng)的添加和刪除方法。
/**
* Add a listener to be notified of react instance events.
*/
public abstract void addReactInstanceEventListener(ReactInstanceEventListener listener);
/**
* Remove a listener previously added with {@link #addReactInstanceEventListener}.
*/
public abstract void removeReactInstanceEventListener(ReactInstanceEventListener listener);
/**
* Listener interface for react instance events.
*/
public interface ReactInstanceEventListener {
/**
* Called when the react context is initialized (all modules registered). Always called on the
* UI thread.
*/
void onReactContextInitialized(ReactContext context);
}
3. BaseReactFragment
BaseReactFragment 繼承自自己封裝的 Fragment 基類 BaseFragment磁椒，這里需要用到 ReactRootView 和 ReactInstanceManager堤瘤。
它們?cè)?Fragment 的 onAttach 方法中獲取，并在 onCreateView 方法中返回該 ReactRootView浆熔。
在 onActivityCreated 方法中即可使用我們的 React Native 組件本辐，這里需要子類實(shí)現(xiàn) getMainPageName 抽象方法，獲取到對(duì)應(yīng)的 React Native 組件医增。
public abstract class BaseReactFragment extends BaseFragment {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
mReactRootView = new ReactRootView(activity);
mReactInstanceManager = ((MyApplication) getActivity().getApplication()).getReactNativeHost().getReactInstanceManager();
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
return mReactRootView;
}
@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
mReactRootView.startReactApplication(mReactInstanceManager, getMainPageName(), null);
}
protected abstract String getMainPageName();
protected void sendEvent(String eventName,
@Nullable WritableMap params) {
if (((MyApplication) getActivity().getApplication()).getReactContext() != null) {
((MyApplication) getActivity().getApplication()).getReactContext()
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);
}
}
}
sendEvent 方法用于原生調(diào)用 js 的接口慎皱，需要獲取到 ReactContext 對(duì)象，通過 ReactInstanceManager#getCurrentReactContext 獲取到的 ReactContext 為空叶骨，這里從 Application 中獲取茫多。
創(chuàng)建一個(gè) BaseReactFragment 的子類用于裝載 React Native 組件
public class MyFragment extends BaseReactFragment {
@Override
public String getMainPageName() {
return "MyComponent"; // name of our React Native component we've registered
}
}
4. BaseReactActivity
BaseReactFragment 所在的 Activity 必須實(shí)現(xiàn) DefaultHardwareBackBtnHandler，用于綁定 React Native 組件的生命周期邓萨。
public class BaseReactActivity extends BaseActivity implements DefaultHardwareBackBtnHandler {
/*
* Get the ReactInstanceManager, AKA the bridge between JS and Android
* We use a singleton here so we can reuse the instance throughout our app
* instead of constantly re-instantiating and re-downloading the bundle
*/
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
/**
* Get the reference to the ReactInstanceManager
*/
mReactInstanceManager =
((MyApplication) getActivity().getApplication()).getReactNativeHost().getReactInstanceManager();
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
/*
* Any activity that uses the ReactFragment or ReactActivty
* Needs to call onHostPause() on the ReactInstanceManager
*/
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause();
}
}
/*
* Same as onPause - need to call onHostResume
* on our ReactInstanceManager
*/
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
}
本文是 慌不要慌 原創(chuàng)地梨，發(fā)表于 https://danke77.github.io/菊卷，請(qǐng)閱讀原文支持原創(chuàng) https://danke77.github.io/2016/11/23/react-native-inside-fragment/，版權(quán)歸作者所有宝剖，轉(zhuǎn)載請(qǐng)注明出處洁闰。
