spotthestation

欢迎来到STSAPP

该项目是使用IGNITE CLI V8.4.2（React Native V0.69.7）进行的。

目前包括：

• 反应天然
• 反应导航
• MOBX状态树
• 打字稿
• 还有更多！

入门

先决条件

在运行此项目之前，您需要在计算机上安装以下软件：

• node.js（v16.x或更高）
• 纱线（v1.x）
• 反应天然CLI

安装

1. 将示例环境文件复制到配置目录：

    cp .env.example scripts/config/.env.staging
   

2. 在scripts/config/.env.staging文件中，为以下变量提供值：
   • API_URL您的后端URL，例如：http：// localhost：5000/。
   • GOOGLE_API_TOKEN您的Google Maps API令牌。了解如何在这里获取它。
   • MAPBOX_API_TOKEN您的MAPBOX令牌。了解如何在这里获取它。
   • 您可以将其他变量保持不变
3. 运行config-env.sh脚本

    ./scripts/config-env.sh staging
   

4. 在您的主目录中创建.netrc文件（不是项目目录），其中包含以下内容：

    machine api.mapbox.com
   login mapbox
   password YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   用mapbox令牌替换YOUR_SECRET_MAPBOX_ACCESS_TOKEN 。
5. 更改.netrc文件权限

    sudo chmod 0600 ~/.netrc
   

6. 创建.gradle/gradle.properties在您的主目录中（不是项目目录），其中包含以下内容：

    MAPBOX_DOWNLOADS_TOKEN=YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   用mapbox令牌替换YOUR_SECRET_MAPBOX_ACCESS_TOKEN 。
7. 运行npx @sentry/wizard@latest -s -i reactNative 。随时拒绝更新和/或安装POD。
8. 安装项目依赖性：

    yarn install
   

在iOS设备上运行

1. 在Xcode中打开ios/STSApp.xcworkspace 。
2. 转到Signing & Capabilities卡。
3. tick Automatically manage signing复选框。
4. 选择开发团队。注意：由于此项目使用推送通知，因此个人发展团队将无法正常工作。
5. 将捆绑包标识符更改为任何值。
6. 单击“启动”图标以在设备上构建并运行该应用程序。

在Android设备上运行

运行以下命令：

 yarn android

如果构建成功，则可能需要在设备上手动打开该应用程序。

项目结构

IGNITE样板项目的结构看起来与此相似：

 ignite-project
├── app
│   ├── components
│   ├── config
│   ├── i18n
│   ├── models
│   ├── navigators
│   ├── screens
│   ├── services
│   ├── theme
│   ├── utils
│   ├── app.tsx
├── test
│   ├── __snapshots__
│   ├── mockFile.ts
│   ├── setup.ts
├── README.md
├── android
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── keystores
│   └── settings.gradle
├── index.js
├── ios
│   ├── IgniteProject
│   ├── IgniteProject-tvOS
│   ├── IgniteProject-tvOSTests
│   ├── IgniteProject.xcodeproj
│   └── IgniteProjectTests
├── .env
└── package.json

./app目录

IGNITE样板项目中包含的是app Directory。这是您通常在使用香草react本机时必须创建的目录。

app目录的内部看起来类似于以下内容：

 app
├── components
├── config
├── i18n
├── models
├── navigators
├── screens
├── services
├── theme
├── utils
├── app.tsx

组件这是您可重复使用的组件寿命的地方，可帮助您构建屏幕。

i18n，如果您使用react-native-i18n这是您的翻译居住的地方。

模型这是您的应用程序型号将要居住的地方。每个模型都有一个目录，该目录将包含mobx-state-tree模型文件，测试文件以及任何其他支持文件，例如操作，类型等。

导航员这是您的react-navigation导航员将要居住的地方。

屏幕这是您的屏幕组件所在的地方。屏幕是一个反应组件，它将占用整个屏幕并成为导航层次结构的一部分。每个屏幕将具有一个包含.tsx文件的目录，以及任何资产或其他辅助文件。

服务与外界接口的任何服务都将居住在这里（例如REST API，推送通知等）。

这里的主题是您应用程序的主题，包括间距，颜色和版式。

UTILS这是放置其他助手和公用事业的好地方。诸如日期助手，格式化器等之类的东西经常在这里找到。但是，它仅用于在您的应用程序中真正共享的内容。如果仅由特定组件或模型使用助手或实用程序，请考虑使用该组件或模型将助手共存。

app.tsx这是您应用程序的入口点。在这里，您将找到呈现应用程序其余部分的主要应用程序组件。

./test目录

该目录将保留您的嘲笑配置和模拟。

如何获得MAPBOX令牌？

1. 在这里创建一个Mapbox帐户
2. 转到访问令牌页面
3. 单击Create a token
4. 命名您的令牌，勾选所有公共范围复选框，勾选以下秘密范围复选框：
   • 样式：下载
   • 下载：阅读
   • 视觉：下载
   • 导航：下载
5. 单击Create token并复制令牌。它应该从sk.