生态:React Native

生态:React Native

第一类:React Native 快速入门


第二类:学习 JavaScript

  • MDN JavaScript 教程

    MDN 是前端同学必备的网站,内容权威,适合有编程基础的人快速掌握 JavaScript。

  • ES6 入门教程

    ES6 对 JavaScript 的发展有划时代意义,本书可以作为入门学习或手册查询使用。

  • Learn JavaScript

    结合思维导图边学边练,涵盖 JavaScript 的 13 个主要部分,适合边学习边实践。


第三类:学习 TypeScript

如果你要写业务项目,我推荐使用 TypeScript 而非 JavaScript。TypeScript 的静态类型检查功能可以减少 Bug 并提高可维护性。


第四类:学习 React

对于 React 的学习,我推荐 React 官方教程和文档。

  • React 官方教程

    包含初学者到深入学习的内容,配有示例和练习材料,适合不同层次的学习者。

  • API Reference

    这是 React 的 API 手册,但目前仅完成了 5%。需要查询 API 时,可以访问 React 老官网。


项目工程

第一部分:脚手架

React Native 项目可以选择以下脚手架:

  • react-native init

    React Native 官方提供的基础脚手架。

  • Expo

    集成了原生工具和能力,支持 Android、iOS 和 Web,适用于出海应用。

  • Ignite

    由美国团队开发,包含包管理、状态管理、自动化测试等技术选型。


第二部分:包管理

常见的包管理工具:

  • Yarn

    Meta 团队开发的包管理工具,安装速度和功能强大,推荐使用经典版。

  • npm

    Node.js 自带的包管理工具,搭建 React Native 环境时自动安装。

  • pnpm

    更快的包管理工具,适用于需要快速安装的场景。


第三部分:状态管理

常见的状态管理工具:

  • React 自带:

    • useState
    • useReducer
    • useContext
  • 第三方库:

    • Redux + Redux Toolkit
    • Mobx
    • Zustand
  • Hooks 工具:

    • react-query
    • SWR
    • react-hook-form
    • formik
  • GraphQL:

    提供比 RESTful 更灵活的请求后端接口的方案。


第四部分:自动化测试

常见的自动化测试工具:

  • Jest

    Meta 团队开发的 JavaScript 单元测试框架。

  • react-native-testing-library

    专门用来测试 React Native 组件。

  • Detox

    用于在真机/模拟器上运行测试代码,适合真实环境测试。


样式和组件

样式

  • React Native 自带的 StyleSheet

    适合大多数样式需求,简洁高效。

  • Styled-Components

    适合喜欢 CSS 语法的开发者。

  • Tailwind CSS

    简拼 CSS,减少键盘敲击次数,但性能有所损耗。


组件库

  • Native Base

    近两年最活跃的 React Native 组件库,功能强大。

  • React Native Elements

    常用的组件库,风格简洁。

  • React Native Paper

    Material Design 风格的组件库。

  • UI Kitten

    另一种流行的组件库。


路由

  • React Navigation

    React Native 最主流的路由库。

  • React Native Navigation

    另一个路由库,但下载量远不如 React Navigation。


手势


动画

  • Animated API

    React Native 提供的基础动画 API,适合轻量级动画。

  • Reanimated

    社区提供的高性能动画库,适用于大规模动画。

  • Lottie

    适合 UI 设计师提供的静态动画。


国内常用组件

相关推荐
Mintopia18 分钟前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
Promise52018 分钟前
大屏"跑马灯" 长列表性能优化
前端·javascript
子玖19 分钟前
初始化项目前的准备
前端·javascript·vue.js
Mintopia19 分钟前
Three.js进阶实战:打造动态光影交互场景 ——结合环境光、聚光灯与相机控制的沉浸式体验
前端·javascript·three.js
Carlos_sam21 分钟前
OpenLayers:封装Overlay的方法
前端·javascript
Json_24 分钟前
使用uni-app框架 写电商商城前端h5静态网站模板项目-手机端-前端项目练习
前端·javascript·vue.js
海底火旺24 分钟前
JavaScript中的“先有鸡还是先有蛋”——变量提升的奥秘
前端·javascript
the_flash25 分钟前
JS拖动的原理
前端·javascript
你的人类朋友26 分钟前
解释一下Node.js的『阻塞』现象,并回答:为什么会阻塞?什么情况下会阻塞?
javascript·后端·node.js
旧识君1 小时前
前端图片压缩实战:基于compressorjs的高效解决方案
前端·javascript·vue.js