React Native项目--NNHybrid

发表于 | 更新于: | 分类于
字数统计: 525

前言

从事iOS也有几年，一直就是做原生，没有使用RN这些跨平台的开发方案。也许是最近闲的慌吧，想学一下跨平台方案，在React Native和Flutter之间想了好久，最后贪图RN上手的时间成本可能更少吧，最终觉得还是学RN。

项目介绍

NNHybrid是基于React Native+Redux实现的一个混合开发App，目前只兼容iOS，后续会对功能再进行完善，并且兼容Andriod。

这个项目是用来学习RN的练手项目，我自己也是边看边写的，所以项目还是会有比较多的问题。

项目效果图

项目依赖库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"dependencies": {
  "@react-native-community/async-storage": "^1.3.3",
  "pinyin": "^2.8.3",
  "prop-types": "^15.7.2",
  "react": "16.6.3",
  "react-native": "0.58.6",
  "react-native-device-info": "^1.1.0",
  "react-native-gesture-handler": "^1.1.0",
  "react-native-img-cache": "^1.6.0",
  "react-native-linear-gradient": "^2.5.4",
  "react-native-parallax-scroll-view": "^0.21.3",
  "react-native-root-toast": "^3.0.2",
  "react-native-storage": "^1.0.1",
  "react-native-swiper": "^1.5.14",
  "react-native-vector-icons": "^6.4.2",
  "react-navigation": "^3.3.2",
  "react-navigation-redux-helpers": "^3.0.0",
  "react-redux": "^6.0.1",
  "redux": "^4.0.1",
  "redux-devtools": "^3.5.0",
  "redux-thunk": "^2.3.0",
  "rn-fetch-blob": "^0.10.15"
},

项目心得

个人觉得React Native项目开发中倒不是说UI有多难写，使用JS写UI即使再难写，也不会比OC的难写（比如说富文本）。反而是其他几个地方比较头痛或者说刚开始的很不习惯。这里我列举几个：

  • 导航（React-Navigation的使用)
  • React Native与原生通信（原生方面涉及到多线程，JS方面涉及async/await）
  • Redux（单向数据流）

代码传送门最后还是希望这个项目对你学习RN有帮助！