怎樣創建你的第一個React Native App[每日前端夜話0xD8]

開發人員總會遇到幾個十分常見的疑問，即應該怎樣正確的設計新應用，以及如何從選定的技術堆棧入手。因此，你需要學習如何用 React Native Starter 創建全新的移動應用程序，瞭解其設計模式並嘗試理解如何確保主代碼乾淨且可擴展。

什麼是 React Native Starter？

首先，所有創建應用程序的人通常都會面臨相同的舊問題。這包括需要了解要選擇的適當技術棧，正確添加導航的方法以及知道管理其數據的方法等。一般的開發人員需要花費 40 個小時來弄清楚架構，這其中甚至不包括應用程序組件或精確的頁面。

React Native Starter 可以通過爲開發人員提供適用於他們應用程序的可擴展、多功能和強大的入門套件來解決這些問題。該套件包括整合 Redux 管理數據以及提供屏幕過渡等效果的響應式導航等，可以使你的團隊可以節省很多金錢與時間。

用 React Native Starter 開始一個全新的 App 項目

所需的先決條件：

---

要使用本教程，你必須對 React 和 JavaScript 有所瞭解。即使你可能沒有使用 React 的經驗，也沒關係。在本文中，你將學習 React 的基本概念。

選擇開發工具。可以使用任意的平臺和編輯器組合；但是我建議你從以下內容開始：

• Visual Studio Code：現有最佳編輯器的示例。

• React Native Tools for VSCode: ：這是用於 Visual Studio Code 的插件，可與 React native development 一起使用，爲用戶提供有用的快捷方式，並允許他們使用直接從 VSCode 環境調試代碼。

• Reactotron：這是一個桌面程序，用於檢查 React Native 和 React.js 項目。

如果你需要開發 iOS 應用，還需要安裝 XCode。

開始你的項目

---

假設你要構建 WordPress 博客的移動端的形式，並且要使用 RNS。

React Native Starter 隨附了幾個主題供你選擇，你可以從這個列表中選擇自己喜歡的主題：

建立這些主題後，工作人員正試圖佔領儘可能多地市場。你會發現 RNS 中包含的任何一種設計趨勢。對於要創建的全新博客應用，需要從深色版本中進行選擇。以下是它們的示例：

我們需要克隆 RNS 代碼並轉到 git 存儲庫：

1git clone https://github.com/flatlogic/react-native-starter-full.git
2cd react-native-starter-full

首先，爲 React Native Starter 提供了一個默認主題（也很棒），但是你要選擇一個黑暗的主題。其文檔【https://docs.reactnativestarter.com/】中表示，僅需要運行後續命令即可更改主題：

1$THEME_NAME=dark bash ./change-theme.sh

然後，你的應用界面會變暗。那麼怎樣它在包含的所有屏幕中顯示？要查看效果，請運行以下兩個控制檯命令：

1yarn install
2yarn run:ios

你必須等到構建完成後，才能在模擬器中看到該應用。這是準備就緒的初始應用。

優化項目

---

接下來，你必須微調剛剛創建的應用程序，使其符合你的應用類型。首先你需要確定程序中需要哪些頁面。你正在創建的博客頁面列表爲：

• 登錄

• 文章列表。

• 單篇文章頁面。

• 個人資料頁面。

每個頁面都包含在 RNS 中，所以讓我們來更改指定的模板。你要做的就是修改導航。打開當前的導航頁面（src / modules / navigation / MainTabNavigator.js），你會注意到其中包含的內容以及導航器中每個頁面的使用情況。

但是，導航器選項卡只需要兩個頁面：文章列表和個人資料頁面。我們可以像這樣修改它：

現在，標籤導航器有兩個界面。之後還要有兩個附加界面（“登錄”和“發佈”），你必須修改頂級導航器：（src/modules/navigation/RootNavigation.js）：然後完成導航。所有需要的界面都在那裏。

後續步驟

---

無論應用程序的目標是什麼，後續操作都將更加精確，但是由於 RNS 非常靈活，所以你可以快速進行這個操作，而不會帶來太多麻煩。只需要通過更改模塊容器的代碼將 RNS 掛接到博客的端點即可。

結論

如你所見，使用 React Native Starter 開始一個全新的應用非常簡單。你可以在一小時內精確的爲應用開發樣板代碼，並且無需花費大量的工作或設計知識。這就是在開始一個新的移動應用項目時，React Native Starter 居於首位的原因！

原文：https://medium.com/flatlogic/how-to-make-your-first-react-native-app-c79b0ad4b0a