在 Fragment 中使用 React Native

来源：互联网发布：华科软件学院编辑：程序博客网时间：2024/05/16 06:34

1.Applications 实现 ReactApplication 的抽象方法 getReactNativeHost，加载jsx资源。

package com.silabs.reactnativeappdemos;import android.app.Application;import com.facebook.react.ReactApplication;import com.facebook.react.ReactNativeHost;import com.facebook.react.ReactPackage;import com.facebook.react.shell.MainReactPackage;import com.silabs.reactnativeappdemos.Manager.AppReactPackage;import java.util.Arrays;import java.util.List;/** * Created by chenjialin on 17/2/16. */public class MyApplication extends Application implements ReactApplication {    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {        @Override        public boolean getUseDeveloperSupport() {//            return BuildConfig.DEBUG;            return false;        }        @Override        protected List<ReactPackage> getPackages() {            return Arrays.<ReactPackage>asList(                    new MainReactPackage(),                     new AppReactPackage()            );        }    };    @Override    public ReactNativeHost getReactNativeHost() {        return mReactNativeHost;    }}

2.ReactFragment 继承Fragment类 ，

它们在 Fragment 的 onAttach 方法中获取ReactRootView和ReactInstanceManager，并在 onCreateView 方法中返回该 ReactRootView

在 onActivityCreated 方法中即可使用我们的 React Native 组件，这里需要子类实现 getMainPageName 抽象方法，获取到对应的 React Native 组件。

package ReactNative;import android.content.Context;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.ViewGroup;import com.blestech.application.Applications;import com.facebook.react.ReactInstanceManager;import com.facebook.react.ReactRootView;/** * Created by chenjialin on 17/3/13. */public abstract class ReactFragment extends Fragment {    private ReactRootView mReactRootView;    private ReactInstanceManager mReactInstanceManager;    // This method returns the name of our top-level component to show    public abstract String getMainComponentName();    @Override    public void onAttach(Context context) {        super.onAttach(context);        mReactRootView = new ReactRootView(context);        mReactInstanceManager =                ((Applications) getActivity().getApplication())                        .getReactNativeHost()                        .getReactInstanceManager();    }    @Override    public ReactRootView onCreateView(LayoutInflater inflater, ViewGroup group, Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        return mReactRootView;    }    @Override    public void onActivityCreated(Bundle savedInstanceState) {        super.onActivityCreated(savedInstanceState);        mReactRootView.startReactApplication(                mReactInstanceManager,                getMainComponentName(),                null        );    }}

3.在 Fragment 中使用 React Native

package com.blestech.me;import android.support.v7.widget.Toolbar;import ReactNative.ReactFragment;/** * Created by chenjialin on 16/12/6. */public class MeActivity extends ReactFragment {    private Toolbar mToolbar;////    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {//        View view = inflater.inflate(R.layout.device_activity, container, false);////        mToolbar = (Toolbar) view.findViewById(R.id.toolbar);//////        mToolbar.setTitle("");//        ((AppCompatActivity) getActivity()).setSupportActionBar(mToolbar);//////        mToolbar.setBackgroundResource(R.color.navigation);////        TextView tv = (TextView) mToolbar.findViewById(R.id.title_sub);//////        tv.setText("我的");//        return view;//    }@Override      public String getMainComponentName() {           return "hellowrd"; // name of our React Native component we've registered    }}

1 0