入門 - Snack 中的第一個程式

---

Snack 是一個開源的 Expo 平臺，可以在其中進行 React Native 程式設計，並立即看到結果。它會編譯並構建用於在不同型別裝置或 Android、iOS 或 Web 上執行的包。程式碼可以快速儲存和共享到 Snack。當用戶鍵入程式碼時，該介面會向用戶提供庫安裝連結。Snack 是一個易於使用且快速的平臺，使初學者更容易學習 React Native。使用者無需安裝任何東西。只需註冊，然後登入您的 Expo 帳戶，即可開始編寫程式碼。

瞭解 Expo Snack

要啟動程式，只需登入 Snack 並開始鍵入。Expo Snack 佈局顯示如下所示的重要部分：

區域 1

這是使用者可以命名程式的區域。它還用於儲存相同程式或已更改程式的另一個副本。只需更改名稱，即可儲存新副本。

區域 2

此區域顯示專案結構。此專案結構中包含的重要資料夾是 assets 資料夾和 components 資料夾。App.js 是主要的程式碼檔案，而 package.json 顯示依賴項。

區域 3

中間的區域是開發人員編寫程式碼的地方。程式碼使用 javascript 和 JSX 編寫。JSX 是 javascript 的擴充套件，其中使用了標籤。React Native 程式設計很容易完成，無需單獨擔心模組安裝。當用戶編寫程式碼時，更改會自動儲存，並且開發人員會獲得更新所需庫的提示。

區域 4

右側的區域用於立即檢視結果。它為使用者提供了檢視輸出在使用者移動裝置上如何顯示的選項。

區域 5

“區域 4”內的此區域顯示上部區域中的選項卡，用於選擇檢視程式輸出的選項。它包括在 Android 和 iOS 模擬器上顯示結果的選項卡。

區域 6

此區域用於檢視錯誤或更新所需庫或模組版本的提示。當程式設計師鍵入程式碼時，它會不斷變化。如果使用者進行了所有必要的更改並最終確定了程式，則程式將顯示“無錯誤”狀態。

區域 7

這顯示了 Snack 的版本號。隨著 Snack Expo 的不斷發展，會進行新的版本更改，使用者通常可以選擇一些最近的版本。如果使用者嘗試執行使用當前列表中不可用的舊版本建立的程式，此平臺將提供更新提示，使用者可以輕鬆地為新的可用版本設定程式。

線上檢視結果

當用戶輸入程式碼時，預設情況下會選擇 Web 檢視，結果會立即顯示。但是，使用者也可以選擇 Android 手機選項或 iOS 模擬器來線上檢視結果，然後單擊“點選播放”以檢視結果。在這裡，如果其他使用者同時使用模擬器，使用者必須在佇列中等待。

在使用者的移動裝置上檢視結果

為此，使用者必須在個人手機上安裝 Expo Go。使用相機掃描二維碼以檢視結果。

程式程式碼說明

• 步驟 1 - 匯入所需的庫/模組。

• 步驟 2 - 建立預設類 MynewAppp1，它擴充套件了來自 React 的 Component。

• 步驟 3 - 要使輸出可見，使用 render() 函式。

• 步驟 4 - render 函式使用 return() 指定檢視區域的外觀以及輸出中將顯示的內容。

• 步驟 5 - 如果要在輸出中看到多個元件（例如 Text|Button 等），則使用 View 標籤。

• 步驟 6 - 樣式規範用於佈局要與給定標籤一起包含的樣式。

• 步驟 7 - Text 標籤指定將在螢幕上顯示的文字。

第一個程式/程式碼

import React from 'react';
import { Text, View } from 'react-native';

export default class MynewApp extends React.Component {
   render() {
      return (
         <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontWeight: 'bold', color: 'brown' }}>Hello, How are You! Lets begin learning </Text>
            <Text>Snack Expo Programming</Text>
         </View>
      );
   }
}

輸出

如下所示的輸出線上和個人手機上均可見。

在 Android 模擬器上 -

在個人移動裝置上 -

結論

本文介紹了在 Expo Snack 上開始程式設計的方法。首先解釋了開源平臺，並透過一個小例子說明了編寫程式碼、儲存程式碼以及線上模擬器或個人移動裝置上檢視輸出的方法。