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


国内常用组件

相关推荐
天天扭码几秒前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
一天睡25小时7 分钟前
React与Vue表单的对比差异
前端·javascript
在澳门喝茶的芦竹9 分钟前
React高阶组件——React.momo
javascript·react.js
WEI_Gaot9 分钟前
ES6 模板字符串
前端·javascript
长欢10 分钟前
保持元素宽高比
javascript
前端大白话12 分钟前
深入理解 JavaScript 中 async 函数与 await 关键字的执行奥秘
前端·javascript·架构
Jet_closer_burning14 分钟前
axios封装
前端·javascript·vue.js·react.js·ajax
7643314 分钟前
Nuxt3-Vue3
前端·javascript·vue.js
兜小糖的小秃毛35 分钟前
两段文本比对,高亮出差异部分
linux·前端·javascript
佛系菜狗44 分钟前
element-ui、element-plus表单resetFields()无效的坑
前端·javascript·vue.js