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

• 2019 年 10 月 29 日
• 筆記

日前端夜話0xD8

每日前端夜話，陪你聊前端。

每天晚上18:00準時推送。

正文共：1602 字

預計閱讀時間：10 分鐘

作者：Anastasia Ovchinnikova

翻譯：瘋狂的技術宅

來源：medium

開發人員總會遇到幾個十分常見的疑問，即應該怎樣正確的設計新應用，以及如何從選定的技術堆棧入手。因此，你需要學習如何用 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 存儲庫：

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

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

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

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

yarn install  yarn 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

下面夾雜一些私貨：也許你和高薪之間只差這一張圖

2019年京程一燈課程體系上新，這是我們第一次將全部課程列表對外開放。

願你有個好前程，願你月薪30K。我們是認真的 ！