Weex与ReactNative开发方式对比

版权声明:本文为博主原创文章,欢迎转载,转载请注明博主和原文链接。 https://blog.csdn.net/u014077888/article/details/79932219

一、Weex与ReactNative开发方式对比

 weex react native
JS框架vue.js,可以开发小程序、PWAreact.js,目前不能开发小程序
管理实例是否单例化没有要求官方建议ReactInstanceManager进行单例化
即同一个bundle name 打开多次都使用同一个ReactInstanceManager
开发时启动web服务使用server.js或者express等nodejs中的web服务react native 自己封装:
npm run start "start": "node node_modules/react-native/local-cli/cli.js start"
打包Bundle
使用webpack:
webpack --config build/webpack.native.config.js
react native 自己封装:
react-native bundle --platform android 
--dev false --entry-file index.js 
--bundle-output android/xxx/src/main/assets/index.android.bundle
--assets-dest android/xxx/src/main/res/
按页面拆分Bundle使用webpack 扫描不同的入口文件,打出不同的包,
一个Bundle就是一个page
自己写代码实现切换不同的入口文件打包,
一个Bundle可以包含多个page,但我们可以只包含一个page,
来做页面级别的Bundle拆分
路由,实现MPA拦截vuerouter的push方法即可需要自己写native module 来处理页面跳转
热更新
支持网络bundle、assets bundle、file bundle三种格式,
使用mWXSDKInstance.renderByUrl()
RNHost 支持assets bundle、file bundle,
网络bundle需要自己实现先下载成file bundle,
从而实现热更新
debug环境下可以使用网络bundle开发
支持Android版本>=14>=16
后门模式没有,可以自己实现一个
mReactInstanceManager.showDevOptionsDialog();
调试Chrome Developer Tools
1、app native DevOptionsDialog
2、Chrome Developer Tools
Android 返回键自己用事件实现
invokeDefaultOnBackPressed()


二、Weex、ReactNative Android平台容器的封装,实现MPA,Bundle缓存、验签等通用功能。

1、WeexContainer-Android  :https://github.com/MasonLiuChn/WeexContainer-Android

2、RNContainer-Android:https://github.com/MasonLiuChn/RNContainer-Android

推荐使用Weex
阅读更多

没有更多推荐了,返回首页