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 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!