Android集成React Native实现多Tab页

添加依赖配置

在project build.gradle中添加:

allprojects {    repositories {        ...        maven {            // All of React Native (JS, Android binaries) is installed from npm            url "$rootDir/../node_modules/react-native/android"        }    }    ...}

在app build.gradle中添加:

dependencies {    ...    compile "com.facebook.react:react-native:+" // From node_modules.}

AndroidManifest.xml中添加

    ...        ...

集成ReactApplication

自定义Application，实现ReactApplication接口

public class MyApplication extends Application implements ReactApplication {    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {        @Override        protected boolean getUseDeveloperSupport() {            return BuildConfig.DEBUG;        } @Override        protected String getBundleAssetName() {            return super.getBundleAssetName();        }        @Override        protected String getJSBundleFile() {            return super.getJSBundleFile();        }                @Override        protected List getPackages() {            return Arrays.asList(                    new MainReactPackage()            );        }    };    @Override    public ReactNativeHost getReactNativeHost() {        return mReactNativeHost;    }}

Activity启动RN

public class MainActivity extends ReactActivity {    /**     * Returns the name of the main component registered from JavaScript.     * This is used to schedule rendering of the component.     */    @Override    protected String getMainComponentName() {        return "RNSample";    }}

Fragment启动RN

android fragment中包含RN，FaceBook没有实现ReactFragment，需要我们自己实现，代码也很简单

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 = ((MyApplication) 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        );    }}

其他Fragment页面嵌入RN只要继承ReactFragment就行了，如

public class TabAppFragment extends ReactFragment {    @Override    public String getMainComponentName() {        return "TabApp";    }}

android显示多个RN页面

假设有个需求，android页面某几个Tab要用RN来实现，效果如下，怎么做？

很简单，只要定义不同的Fragment就行了

TabAppFragment.java

public class TabAppFragment extends ReactFragment {    @Override    public String getMainComponentName() {        return "TabApp";    }}

TabWorkFragment.java

public class TabWorkFragment extends ReactFragment {    @Override    public String getMainComponentName() {        return "TabWork";    }}

RN端index.android.js 重点在于AppRegistry.registerComponent是可以注册多个Component的，很多人忽略了这个以为RN只有一个入口。

export class TabWork extends Component {  render() {    return (                        Welcome to React Native TabWork!                  );  }}export class TabApp extends Component {  render() {    return (                        Welcome to React Native TabApp!                  );  }}AppRegistry.registerComponent('TabWork', () => TabWork);AppRegistry.registerComponent('TabApp', () => TabApp);

Reference

https://facebook.github.io/react-native/docs/integration-with-existing-apps.html