生态: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 设计师提供的静态动画。


国内常用组件

相关推荐
hui函数1 分钟前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam1 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8501 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
今禾3 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的3 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句3 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
码间舞3 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀3 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce4 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L5 小时前
Vue 电影导航组件
前端·javascript·vue.js