| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
AlyR13
8年前发布

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>    
 本文由用户 AlyR13 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1478572489425.html
安卓开发 Android开发 移动开发 React Native