不知不觉自己已经使用了2年多的react的,起初接触react的时候也听吃力的,随着使用的时间不短增加,react社区也不段的丰富,react的生态系统也越来越完善,相信现在使用react的小伙伴不会陌生。 redux、react-redux、react-router、react-saga、reselecte、webpack......等一系类的插件,当然要有好多react脚手架:dva、umi、next、cra.....等,这些插件和脚手架都能使咱们在使用react的时候更方便开发。
最近抽空看一眼react-native,我也问了我司的android开发和ios开发有没有使用过react-native,他们的回答是没有用过,但是他们的反映是react-native好像有很多坑,我作为实验搭建react-native脚手架着,并不知道react-native有多少个坑,废话不说分享一下我这两天
动机(下面仅代表个人意见,如有错误可以留言修正)
话说使用react的开发人员,学习起来react-native不是很费力,我也是抱着试试态度折腾一下,我先在网上搜索了一下,react-native的常用脚手架。大概有一下几种-
react-native-cli(环境搭建不是太简单)
-
优点
- 官方推荐
- 可维护性高
- 社区活跃
- start 75k
- 使用灵活
-
缺点
- 硬件要求mac
- 软件 xcode、AndroidStudio
- 配置的时候需要翻墙
- 发布正式包的时候需要配置环境。
- 未集成 saga、redux、reselect、react-navigation、react-native-debugger
react-native init program-name #初始化项目 npm start(react-native start) #在项目目录下启动 js service react-native run-android #已连接真机或开启模拟器前提下,启动项目 react-native run-ios -
create-react-native-app(环境搭建简单)
-
优点
- create-react-native-app是React 社区孵化出来的一种无需构建配置就可以创建>RN App的一个开源项目,一个创建react native应用的脚手架工具(最好用,无需翻墙)
- 亲自搭建确实方便快捷
- 不用集成react-navigation
- 集成Expo
-
缺点
- 需要客户端(手机)现在 Expo,进行网络连接调试
- 未集成 saga、redux、reselect、react-native-debugger
- start 11k
-
Expo react-native也有推荐但是我亲自搭建环境优缺点无法总结
-
React Native awesome系列。
收集了很多组件、工具、教程和文章。 GitHub地址:github.com/jondot/awes….
动机(下面仅代表个人意见,如有错误可以留言修正)
话说使用react的开发人员,学习起来react-native不是很费力,我也是抱着试试态度折腾一下,我先在网上搜索了一下,react-native的常用脚手架。大概有三种初步入坑(我选择的是start最多最易入手的react-native-cli)
本身用mac开发,就好不费力了执行起来ios的虚拟机,我看看一下 react-native的入门教程
发现不是太难就是直接开撸,但是由于自身的开发习惯,和使用脚手架的不同,感觉react-native-cli是一个纯react项目,真能简简单单的玩玩,因为这个脚手架里面没有任何有助于实际开发插件(saga、redux、reselect、react-native-debugger),处于自己的开发习惯就自己集成saga、redux、reselect、react-native-debugger,这样看上去还像个脚手架。
效果(只是简单执行一下action-》saga-》redux,和调试工具操作)
图1图4
会发现图3和图4都是有相应的改变,这样是不是就符合咱们大家平常的开发了对于store的变化一目了然。接下来看看 console和elements,以及其他的调试看图
看到这的时候你是不是已经很喜欢了,这不是是web开发吗 哈哈😁。看下图
路由跳转
state改变
log提示
这是不是个react web开发很想,github地址 github.com/zhangfalian…, 有兴趣的可以clone一份玩耍一下,有什么不对的地方在留言中提出,我也是第一次玩react-native