在 Fragment 中使用 React Native

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 getPackages() {

            return Arrays.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
    }

}