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.