Android集成React Native实现多Tab页

   <p>在project build.gradle中添加:</p>    <pre>  <code class="language-javascript">allprojects {      repositories {          ...          maven {              // All of React Native (JS, Android binaries) is installed from npm              url "$rootDir/../node_modules/react-native/android"          }      }      ...  }</code></pre>    <p>在app build.gradle中添加:</p>    <pre>  <code class="language-javascript">dependencies {      ...      compile "com.非死book.react:react-native:+" // From node_modules.  }</code></pre>    <p>AndroidManifest.xml 中添加</p>    <pre>  <code class="language-javascript"><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></code></pre>    <h2><strong>集成ReactApplication</strong></h2>    <p>自定义Application，实现ReactApplication接口</p>    <pre>  <code class="language-javascript">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;      }    }</code></pre>    <h2><strong>Activity启动RN</strong></h2>    <pre>  <code class="language-javascript">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";      }  }</code></pre>    <h2><strong>Fragment启动RN</strong></h2>    <p>android fragment中包含RN，非死book没有实现ReactFragment，需要我们自己实现，代码也很简单</p>    <pre>  <code class="language-javascript">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          );      }  }</code></pre>    <p>其他Fragment页面嵌入RN只要继承ReactFragment就行了，如</p>    <pre>  <code class="language-javascript">public class TabAppFragment extends ReactFragment {      @Override      public String getMainComponentName() {          return "TabApp";      }  }</code></pre>    <h2><strong>android显示多个RN页面</strong></h2>    <p>假设有个需求，android页面某几个Tab要用RN来实现，效果如下，怎么做？</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d6b42c43d0aa5b88f444538719d8cad5.png"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/a33f70e4e4590f82188a603374f07029.png"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b2b0e2b0c88345f4b44fc3953419863e.png"></p>    <p>很简单，只要定义不同的Fragment就行了</p>    <p>TabAppFragment.java</p>    <pre>  <code class="language-javascript">public class TabAppFragment extends ReactFragment {      @Override      public String getMainComponentName() {          return "TabApp";      }  }</code></pre>    <p>TabWorkFragment.java</p>    <pre>  <code class="language-javascript">public class TabWorkFragment extends ReactFragment {      @Override      public String getMainComponentName() {          return "TabWork";      }  }</code></pre>    <p>RN端 index.android.js 重点在于 AppRegistry.registerComponent是可以注册多个Component的 ，很多人忽略了这个以为RN只有一个入口。</p>    <pre>  <code class="language-javascript">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);</code></pre>    <p> </p>    <p>来自：http://huazhiyuan2008.github.io/2016/11/07/Android集成React Native实现多Tab页/</p>    <p> </p>