利用ReactNative实现三端融合

      由于平台的差异性,真正意义上的一套代码同时可以运行在三端是不存在的。这里说的三端融合是借助webpack打包工具来进行web端代码的打包,从而实现代码可以运行在三端。当然如果想减少工作量,是可以借助其他的开源工具的,比如阿里的react-web,但是它的star数不是很多,所以笔者并没有针对阿里的react-web进行实践,下面来说说实现三端融合的两种方式:


    1.结合redux机制实现纯结合react写法。源码地址在这里

     大体思路如下: 1.对于Android和IOS端采用React-Native本身的处理机制来进行判断 2.对于Web端,利用webpack打包功能将代码打包 3.状态管理用统一机制-redux进行管理

运行过程: npm isntall npm run web-dev // 打开3001端口项目运行在浏览器上 

                   react-native run-android(run-ios) // 项目即可运行在对应手机平台上


    2.利用react-native-web(代替react-web)。源码地址在这里

    这个demo的实现相对来说比较简单,只是大致提到了如何区分不同平台的组件,它的优势在于部分的组件是三端可以共用的。

这两个demo都没有利用针对ios进行处理。只是在针对web以及手机进行了处理。

欢迎大家一起交流~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,995评论 25 709
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 24,347评论 8 183
  • 我轻轻问自己:“吾爱,你恨他吗?”,“恨,我咬牙切齿地恨!”。 转身,我又轻轻问自己:“吾恨,你爱她吗?”,“...
    芳馨66阅读 2,498评论 0 0
  • 清晨梦浅闻鸟鸣, 暮色沉沉听蛙声。 披衣不觉沾雨露, 淋湿多少夜归人。
    金叶_阅读 3,043评论 0 0
  • 小婴孩睡着了,她顺势坐下来,歇歇脚。 今天天气很好,阳光不晒,微风不凉。她推了小孩子在公园里散步。对小小孩儿来说...
    Hi任小楠阅读 2,338评论 1 1

友情链接更多精彩内容