我如何构建和发布我的第一个 React Native 应用（每日不适）

🏃🏻‍♂️TLDR

React Native + Redux + NodeJs + MongoDB Atlas + Heroku = 每日不适

🤨 这是什么？

“每日不适”是一款应用，用户可以通过滑动屏幕选择不同的提示，这些提示旨在帮助他们走出舒适区。用户在提示上向右滑动后，他们的任务就是走出去，去现实世界完成挑战。完成或失败后，用户都会回到应用，记录他们尝试完成提示的经历。这款应用可在Apple AppStore和Google Play Store下载。

☕️ 动机

我开发这款应用的初衷，是因为我意识到自己害怕走出自己的舒适区。我想要一个能迫使我每天尝试新鲜事物、体验那些我原本可能没有机会体验的东西的东西。在意识到市面上似乎没有符合我需求的产品后，我像所有书呆子一样，打开笔记本电脑，开始规划。

🤔 要求/功能

允许用户选择他们想要尝试的提示。
允许用户在完成或尝试提示后记录他们的经历。
允许用户提交提示，一旦审核通过，就会显示给其他用户。
允许用户查看通知以记住完成提示并记录他们之后的经历。

🏗 项目架构

这个项目的整体架构非常简单。我的 React Native 应用程序通过两个不同的 REST 端点与 NodeJS API 通信。一个用于从数据库中检索一定数量的已批准提示，另一个用于提交提示以供审核。我不会过多地介绍后端，我可能会为此撰写另一篇文章。

📱 技术

展览还是不展览，这是个问题

裸工作流程- 此工作流程要求您使用 Android Studio 和 xCode。您需要自行构建和部署应用。但是，您可以完全控制整个项目。
世博会

Expo 是一个通用 React 应用的框架和平台。它是一套围绕 React Native 和原生平台构建的工具和服务，可帮助您使用相同的 JavaScript/TypeScript 代码库在 iOS、Android 和 Web 平台上开发、构建、部署和快速迭代。- Expo

Expo 让您可以快速上手 React Native。您无需打开 Xcode 或 Android Studio。Expo 还会负责构建和签名您提交到 Google Play 和 Apple AppStore 的 App Bundles 和 IPA 文件。然而，这样做的代价是无法在应用中使用原生模块或原生代码。Expo 的妙处在于，如果您意识到需要编写一些原生代码或使用一些 Expo 包中没有的原生模块，您可以直接eject从 Expo 中弹出。弹出后，您就可以编写或使用任何您可能需要的原生代码。

我最终决定使用 Expo，因为我想尽快尝试构建它。

我在这个项目中也使用了 Typescript 而不是 Javascript。我之前没用过 Typescript，所以觉得现在是开始使用它的最佳时机。现在项目已经上线，我可以说我成了它的忠实粉丝。不知道现在还能不能回归正常的 Javascript 了。

NPM 包

react-navigation
- 利用这个包创建不同的屏幕和底部导航栏
redux
- 对于全局数据存储
redux-persist
- 允许我将全局数据存储到用户设备上
react-native-deck-swiper
- 类似 Tinder 的滑动组件。我在这方面确实遇到了一些困难，不得不修改它的源代码，例如在 API 调用后刷新卡片。可惜的是，这个项目似乎没有得到积极的维护。
expo-notification
- 允许我向用户设备发送预定的本地通知。

React Native 应用结构

daily-discomfort/
├─ actions/                     // all redux actions that are dispatched
├─ assets/                      // all images
├─ components/                  // all components 
│  ├─ common/
│  ├─ homescreen/
│  ├─ submitscreen/
│  ├─ historyscreen/
├─ constants/ 
│  ├─ colors.ts                // typescript object that contains all color hex codes
│  ├─ types.ts                 // redux types 
├─ navigation/
│  ├─ bottomtabbarnavigator.tsx    // bottom tab bar for navigation 
├─ networking/
│  ├─ apiRepository.ts         // methods to interact with server
├─ notifications/
│  ├─ notificationManager.ts   // Handles local notification logic
├─ reducers/                   // basic redux reducer
├─ screens/
│  ├─ history.tsx 
│  ├─ home.tsx
│  ├─ submit.tsx 
├─ store/                     // Basic redux store
├─ utils/                     // static helper functions
├─ App.tsx                    // main entry point
├─ app.json                   // expo configuration file
├─ package.json
├─ config.ts                  // config values 
├─ types.ts                   // typescript types

🧑🏻‍💻功能实现

允许用户选择他们想要尝试的提示。
- 我希望用户能够自主选择他们想要尝试的提示，而不是直接给他们一个。这不仅提升了应用的吸引力，也考虑到了特定用户在完成挑战时可能遇到的限制。第二点也是我加入分类的原因。滑动屏幕如今看起来很酷很有趣，所以用滑动屏幕来选择提示的机制很合理。我能够使用 NPM 包react-native-deck-swiper快速实现这一点。

允许用户在完成提示后记录他们的经历。
1. 这让用户可以回顾之前的经历，从而不断成长。虽然这个功能很简单，实现起来也不需要太多工作，但其价值却非常巨大。我只需将之前的挑战数组保存到 redux 中，然后使用 redux-persist 将其持久化到设备上即可。
允许用户提交提示，一旦审核通过，就会显示给其他用户。
1. 这对于这款应用来说是一个极其重要的功能。我希望它成为一个社区驱动的应用，让社区成员能够互相帮助。为了实现这个功能，我在 API 中创建了一条新路由，用于接受POST包含新提示数据的请求。但是，这些提示不会自动添加到用户当前看到的提示中。我必须进入数据库并批准这些新提交的提示。这有助于确保只向用户显示高质量的提示。
允许用户查看通知，提醒他们完成提示并记录之后的经历。
1. 借助Expo 的出色文档，设置起来轻而易举。首先，您需要检查用户是否已授予您的应用显示通知的权限。一旦获得权限，您就可以随时触发本地通知。在我的用例中，我使用了定时通知，允许您安排在未来某个日期发送通知。我用它来提醒用户完成他们当天选择的挑战。

    export const scheduleNotification = async (title: string, body: string) => {
        Notifications.scheduleNotificationAsync({
            content: {
                title: title,
                body: body
            },
            trigger: {
                seconds: NOTIFICATION_REMINDER_SECONDS, 
                repeats: false
            }
        })
    };

🚀 运送最终产品

后端

MongoDB Atlas 数据库
Heroku 用于运行服务器。部署到 Heroku 非常简单。您可以将其与您的 Github 代码库集成，并在 PR 合并到主分支后自动部署。

React Native 应用

Expo 最让我喜欢的地方在于它能帮你处理整个构建过程。你无需担心应用签名，Expo 会帮你搞定。只需两条命令即可同时为 Android 和 iOS 构建应用：

expo build:android
expo build:ios

运行这些命令后，Expo 构建服务器会为您处理剩余的工作，并会为您提供一个链接，您可以从中下载 App Bundle 或 IPA 文件。下载完成后，您就可以将它们上传到 Google Play 商店和 Apple App Store 了🎉

感谢您的阅读，您可以在 Twitter 上找到我https://twitter.com/jeff_codes，我的个人网站是
https://www.jeffedmondson.dev/

文章来源：https://dev.to/jeff_codes/how-i-built-and-published-my-first-react-native-app-daily-discomfort-311d