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.非死book.react:react-native:+" // From node_modules.
}

AndroidManifest.xml 中添加

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

<application>
    ...
    <activity android:name="com.非死book.react.devsupport.DevSettingsActivity" />
    ...
</application>

集成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<ReactPackage> 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，非死book沒有實現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 (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native TabWork!
        </Text>
      </View>
    );
  }
}


export class TabApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native TabApp!
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('TabWork', () => TabWork);
AppRegistry.registerComponent('TabApp', () => TabApp);

來自：http://huazhiyuan2008.github.io/2016/11/07/Android集成React Native實現多Tab頁/