https://github.com/xiaomingx/awesome-react-native

Awesome React Native components, news, tools, and learning material!
https://github.com/xiaomingx/awesome-react-native
Last synced: 3 months ago
JSON representation
Awesome React Native components, news, tools, and learning material!
Host: GitHub
URL: https://github.com/xiaomingx/awesome-react-native
Owner: XiaomingX
License: apache-2.0
Created: 2024-11-25T07:08:47.000Z (6 months ago)
Default Branch: main
Last Pushed: 2024-11-25T07:14:43.000Z (6 months ago)
Last Synced: 2024-11-25T08:22:22.995Z (6 months ago)
Size: 11.7 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

ultimate-awesome - awesome-react-native - Awesome React Native components, news, tools, and learning material!. (Other Lists / Julia Lists)
README

        # awesome-react-native

### 如何操作指南

#### 基础教程

1. **如何在 React Native 中添加 Firebase 用户认证**  

   [链接](https://github.com/g6ling/React-Native-Tips/tree/master/How_to_add_Firebase_Auth_with_react_native)  

   快速集成 Firebase 用户认证功能。

2. **React Native 与 Firestore 的快速入门**  

   [链接](https://invertase.io/blog/getting-started-with-cloud-firestore-on-react-native)  

   学习如何在 React Native 项目中使用 Cloud Firestore。

3. **如何上传照片或文件**  

   [链接](https://github.com/g6ling/React-Native-Tips/tree/master/How_to_upload_photo%2Cfile_in%20react-native)  

   包括如何实现文件选择和上传功能。

4. **在 React Native 中使用环境变量**  

   [链接](https://levelup.gitconnected.com/how-to-gracefully-use-environment-variables-in-a-react-native-app-7f1600446116)  

   优雅地管理和使用环境变量。

5. **如何发布 React Native 应用到安卓应用市场**  

   [链接](https://shift.infinite.red/simple-react-native-android-releases-319dc5e29605)  

   从打包到上架的完整指南。

6. **React Native 应用的远程推送通知**  

   [链接](https://medium.com/differential/react-native-push-notifications-with-onesignal-9db6a7d75e1e)  

   使用 OneSignal 实现跨平台的推送通知功能。

7. **使用 TypeScript 开发 React Native 应用**  

   [链接](https://medium.com/@jan.hesters/using-typescript-with-react-native-946aa4b4ae6f)  

   掌握在 React Native 中引入和配置 TypeScript。

#### 进阶实践

1. **如何构建新闻阅读应用**  

   [链接](https://medium.com/crowdbotics/how-to-build-a-news-reader-app-with-react-native-and-newsapi-8508f48f2b43)  

   使用 NewsAPI 实现实时新闻数据加载。

2. **如何实现聊天机器人**  

   [链接](https://blog.jscrambler.com/build-a-chatbot-with-dialogflow-and-react-native/)  

   集成 Dialogflow，打造智能聊天应用。

3. **如何搭建离线功能支持的 React Native 应用**  

   [链接](https://heartbeat.fritz.ai/building-offline-react-native-apps-with-asyncstorage-dcb4b0657f93)  

   使用 AsyncStorage 实现离线数据缓存。

#### 实用工具和库

1. **常用 UI 库**

   - **Lottie 动画库**: [链接](https://github.com/airbnb/lottie-react-native)  

     轻松实现动画效果。

   - **React Native 地图组件**: [链接](https://github.com/lelandrichardson/react-native-maps)  

     实现跨平台地图功能。

   - **React Native 快速图片组件**: [链接](https://github.com/DylanVann/react-native-fast-image)  

     性能优化的图片加载组件。

   - **React Native 聊天 UI**: [链接](https://github.com/FaridSafi/react-native-gifted-chat)  

     提供聊天界面快速搭建的完整组件。

2. **Material Design 组件**  

   - [React Native Material Kit](https://github.com/xinthink/react-native-material-kit)  

     提供 Material Design 风格的组件集成。

   - [React Native Paper](https://github.com/callstack/react-native-paper)  

     高度可自定义的 Material Design 组件库。

3. **高性能列表**

   - [RecyclerListView](https://github.com/Flipkart/recyclerlistview)  

     专为复杂布局和大数据量优化的高性能列表组件。

### 持续集成与发布

1. **使用 Fastlane 自动化发布流程**  

   [链接](https://dbanck.svbtle.com/deploying-a-react-native-app-with-fastlane)  

   全自动化处理安卓和 iOS 应用的发布流程。

2. **Bitrise CI 集成指南**  

   [链接](https://medium.com/@hesam.kamalan/how-to-automate-android-build-process-on-bitrise-ci-71ae3a94362e)  

   高效管理 Android 自动化构建。

## 导航（Navigation）

* [react-navigation](https://github.com/react-community/react-navigation) - React Native 最受欢迎的导航库，易于使用。

* [react-native-navigation](https://github.com/wix/react-native-navigation) - 提供原生导航体验的库，支持跨平台。

* [react-native-router-flux](https://github.com/aksonov/react-native-router-flux) - 基于 React Native Navigation API 的路由管理。

* [kittenTricks](https://github.com/akveo/kittenTricks) - 一个包含 40+ 屏幕的移动启动套件，支持主题热加载。

---

## 表单（Forms）

* [formik](https://github.com/jaredpalmer/formik) - 处理 React 表单的强大工具，广泛支持表单验证。

* [react-hook-form](https://github.com/react-hook-form/react-hook-form) - 轻量、高性能的表单库，支持 React 和 React Native。

---

## 动画（Animation）

* [react-native-animatable](https://github.com/oblador/react-native-animatable) - 提供一组易用的标准动画。

* [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated) - 性能更优的 React Native 动画库，替代 Animated API。

---

## 存储（Storage）

* [WatermelonDB](https://github.com/Nozbe/WatermelonDB) - 高性能的数据库，适用于大型数据集。

* [realm](https://github.com/realm/realm-js) - 强大的移动端数据库，支持离线数据同步。

* [react-native-storage](https://github.com/sunnylqm/react-native-storage) - AsyncStorage 的轻量封装。

---

## 后端（Backend）

* [react-native-fetch-blob](https://github.com/wkh237/react-native-fetch-blob) - 集成网络与文件系统，支持文件流处理。

* [react-native-background-upload](https://github.com/Vydia/react-native-background-upload) - 支持后台文件上传。

---

## 媒体（Media）

* [react-native-camera](https://github.com/lwansbrough/react-native-camera) - 提供相机功能。

* [react-native-video](https://github.com/brentvatne/react-native-video) - 视频组件，支持流媒体播放。

---

## 深度链接（Deep Linking）

* [react-native-deep-link](https://github.com/Starotitorov/react-native-deep-link) - 处理深度链接的库。

---

## 系统功能（System）

* [react-native-device-info](https://github.com/rebeccahughes/react-native-device-info) - 获取设备信息。

* [react-native-permissions](https://github.com/yonahforst/react-native-permissions) - 统一管理权限请求。

---

## 国际化（Internationalization）

* [react-native-localize](https://github.com/react-native-community/react-native-localize) - 管理 React Native 国际化的推荐工具。

* [fbt](https://github.com/facebookincubator/fbt) - Facebook 开发的国际化框架。

---

## 构建与开发（Build & Development）

* [reactotron](https://github.com/skellock/reactotron) - 调试 React Native 应用的终端工具。

* [react-native-code-push](https://github.com/Microsoft/react-native-code-push) - 实现热更新的插件。

---

## 样式（Styling）

* [styled-components](https://github.com/styled-components/styled-components) - 基于模板字符串的样式库，支持 React Native。

* [react-native-extended-stylesheet](https://github.com/vitalets/react-native-extended-stylesheet) - 扩展样式表，支持变量、相对单位和数学操作。

---

## 其他平台支持（Other Platforms）

* [react-native-web](https://github.com/necolas/react-native-web) - 使用 React Native 开发 Web 应用。

* [react-native-windows](https://github.com/ReactWindows/react-native-windows) - 支持 Windows 平台的 React Native。

---

## 集成（Integrations）

* [react-native-wechat](https://github.com/weflex/react-native-wechat) - 微信登录和分享的 React Native 库。

* [react-native-google-signin](https://github.com/apptailor/react-native-google-signin) - 支持 Google 登录。

---

# React Native 常用工具与资源

以下是对 React Native 开发者最有用的工具、资源与模板的精选列表，帮助你快速上手并提高开发效率。

## 工具

- **[React Native Debugger](https://github.com/jhen0409/react-native-debugger)** - 独立的 React Native 调试工具，集成 React DevTools 和 Redux DevTools。

- **[react-native-rename](https://github.com/junedomingo/react-native-rename)** - 一键重命名 React Native 项目。

- **[CodePush](https://microsoft.github.io/code-push/)** - 实时推送代码更新到你的应用。

- **[Storybook](https://storybook.js.org)** - 为 React Native 组件开发提供的 UI 环境。

- **[react-native-bundle-visualizer](https://github.com/IjzerenHein/react-native-bundle-visualizer)** - 可视化分析 React Native 包的大小，优化性能。

## 模板（种子项目）

- **[Ignite](https://github.com/infinitered/ignite)** - 高效的 React Native CLI，支持 Redux、Sagas 等。

- **[React Native Boilerplate](https://github.com/thecodingmachine/react-native-boilerplate)** - 提供清晰的架构设计和 Redux 集成。

- **[React Native Starter](https://github.com/flatlogic/react-native-starter)** - 包含状态管理、导航、持久化的强大模板。

## 开发框架和组件库

- **[NativeBase](https://github.com/GeekyAnts/NativeBase)** - 提供丰富的跨平台组件，适合快速构建应用。

- **[React Native Elements](https://github.com/react-native-elements/react-native-elements)** - 一组常用的跨平台 UI 组件。

- **[Teaset](https://github.com/rilyu/teaset)** - 专注于内容展示和操作控制的 UI 库，提供简洁的纯 JS 组件。

## 开源应用示例

- **[F8 App](https://github.com/fbsamples/f8app)** - Facebook 开发者大会的官方应用，支持 Redux 和 Relay。

- **[30 Days of React Native](https://github.com/fangwei716/30-days-of-react-native)** - 包含 30 个 React Native 示例，适合学习参考。

- **[GitPoint](https://github.com/gitpoint/git-point)** - 一个全面的 GitHub 移动客户端，支持 iOS 和 Android。

## 学习资源

### 教程

- [官方 React Native 教程](https://reactnative.dev/docs/tutorial) - 从零开始学习 React Native。

- [Building a Calculator App](https://kylewbanks.com/blog/react-native-tutorial-part-1-hello-react) - 用 React Native 开发一个计算器应用的分步教程。

- [React Native Express](http://www.reactnativeexpress.com/) - 快速入门指南，适合初学者。

### 视频

- [React Native Talks](https://www.youtube.com/playlist?list=PLq2wBqKQbpCqVKqZwysoo2MEDwVX7auhX) - 汇集 React Native 相关演讲和讨论。

## 博客

- [React Native 官方博客](https://reactnative.dev/blog/) - 最新更新和开发指南。

- [React Native Training](https://medium.com/react-native-training) - 提供深入的技术文章和实践指南。

- [Red Shift - Infinite Red](https://shift.infinite.red/) - 包含大量 React Native 的开发经验分享。

## 图书

- **[Programming React Native](https://leanpub.com/programming-react-native)** - 免费的 React Native 深入学习书籍。

- **[React Native In Action](https://www.manning.com/books/react-native-in-action)** - 系统性学习 React Native 开发的优秀教材。
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/xiaomingx/awesome-react-native

Awesome Lists containing this project

README
