React Native开发实践总结

上进是诗雯啊
2,904 阅读4分钟

知识路径

预备知识

第一类是开发语言TypeScript、React 框架、开发必备工具这些预备知识，这些都是在开发之前需要掌握的。

journey
    title  
    section TypeScript
        模块化、数据结构语法基础和网络请求异步编程:done,des1
    section React
        state/props/context、components、hooks、JSX:des2
    section 必备工具
        npm/yarn、git、vsCode/xcode/android studio:des3

react思维导图.png

React Native知识

第二类是RN本身的知识，RN组件是这类知识中的重点，包括框架提供的组件和社区提供的组件@ant-design/react-native。API类的知识，参考React Native和Expo官方文档就行。

journey
    title  
    section Component
        View/Text/Image/Pressable/Button/FlatList:done,des1
        section API
        Platform/AppRegister/StyleSheet/Dimensions/PixelRatio:des2
    section 社区组件
        ant-design/react-native:des3

工作流

个人觉得学习实操类知识最好的方法，其实是从开始run项目到调试一步一步操作，通过实践领会。但其中有些可以节约自己独立探索和踩坑时间的经验类知识，比如UI开发技巧、调试思路和打包错误处理等，之后的文章会做单独描述。

搭建环境开发流程上线流程
expo沙盒环境UI调试App发版上架
ios/android原生开发环境代码调试bundle热更新上线

React Native生态

样式和组件

样式

样式工具可以分为三小类

  1. 第一类是React Native自带了“CSS In JS”的 StyleSheet接口；
  2. 第二类是StyledComponent这种方案，如果你喜欢纯正的 CSS 语法，可以选用这种。
  3. 第三类是CSS的简拼方案Tailwind，它和 CSS 的区别类似我们打字时全拼和简拼区别，能让你敲击键盘的次数更少一些，但你需要记住它的简拼规则，而且还有一定的性能损耗。

个人觉得在React Native中使用StyleSheet方案就够了。

组件

React Native有很多自带风格样式的组件库，移动端的toC 应用大多都有 UI 帮忙出设计稿，开发同学需要根据设计稿定制开发，如果用第三方组件库需要进行修改定制，这个过程比较耗时间成本。同时移动应用也有很多toB、toG应用，这些应用使用组件库开发，能够解决很大一部分的开发成本。

我推荐使用的是组件库React Native Paper、ant-design-mobile-rn，但也可以根据团队的喜好选择其他风格的组件库，其他常用的还有React Native Elements、UI Kitten、Native Base。

组件包括核心组件和一些我们国内常用的组件。所谓的核心组件是我们开发React Native应用时使用频率很高的组件，包括导航路由、表单、滑动列表、手势、搜索框等。

React Native本身并没有提供路由解决方案，但社区提供了一些解决方案，包括React Navigation、React Native Navigation这两种。这两个库的名字很相似，也都是路由库，但有区分。目前业内主流的选择是React Navigation，而不是 React Native Navigation，前者的下载量是后者的 20 倍之多，因此我推荐你直接使用 React Navigation方案就够了。

手势库主要有三种：

第一种是React Native本身提供的Animated AP

第二种是社区提供的Reanimated组件

第三种是直接接入设计师使用的AE输出的Lottie 动画。

如何选择呢？

如果是轻量级的动画，你不想多集成一个库，那你可以直接使用Animated。如果你对性能要求高又要大规模使用，那Reanimated是你最好的选择。最后Lottie的方案，适合那种没有人机交互的、由UI直接提供动画配置文件的动画形式。

状态管理

  1. React自带，包括useState、useReducer和 useContext。useContext适合不复杂的项目，不太适合大规模使用。

  2. 第三方库，常用的方案有Redux + Redux Toolkit、单独的Redux、Mobx和Zustand，我发现社区生态用的最多的还是Redux，但个人感觉Redux使用起来成本高，比较难用，推荐使用Zustand，支持hooks方式管理全局state，且支持数据持久化动态更新，当然，如果你喜欢用Redux，可以搭配Redux Tookit使用。

状态管理库.png

脚手架

  1. expo，它帮你集成了一系列的原生工具和能力，还能帮你构建和部署，并同时支持Android、iOS。Expo不仅仅是一个脚手架，更像一套React Native 的基础设施，简化RN开发环境配置过程。

  2. Expo modules，如果你团队开发的应用，用户群主要在国内，而且需要用户自己独立构建和部署，Expo提供的原生工具和能力也可以单独按需使用。

avatar
文章
阅读
粉丝