[學學ReactNative] DAY3 - 按下按鈕打招呼 Hello, React Native!

當你已經建立了 Expo 伺服器並成功連結到手機後，接下來讓我們從範例中修改成我們要的應用程式。

今日目標

1. 加入按鈕讓使用者可以按下
2. 跳出 「Hello, React Native!」 的訊息

觀察範例程式

1. 首先，確保你已經安裝了 Node.js、Expo CLI 和 Expo Go。
   若還沒完成，建議跟著前一篇文章的步驟建立好再來。
2. 打開專案資料夾中的App.js，可以看到裡面有已經寫好的程式碼。
   
3. 對比昨天在手機上執行的成果，可以知道第7行的：

   Open up App.js to start working on your app!
   

   就是可以調整並顯示在手機上的字，其他第13~20行就是調整顏色和對齊的語法。
   

添加按鈕

1. 這邊一樣參考官方文檔的Button部分。
2. 在第2行中可以看到有匯入使用元件的語法，這邊我們要把Button也加進來，讓我們可以使用，因此將此行改為：

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

3. 根據官方文檔範例，這邊在view的區域內的Text替換成Button元件，並寫上按鈕的標題以及按下後要出現的字：

   <Button
        title="Press me"
        onPress={() => Alert.alert('Hello, React Native!')}
      />
   

   加完後App()內容會長這樣：

   export default function App() {
      return (
        <View style={styles.container}>
            <Button
                title="Press me"
                onPress={() => Alert.alert('Hello, React Native!')}
              />
          <StatusBar style="auto" />
        </View>
      );
   }
   

4. 馬上儲存後來執行看看能不能用吧！

   npx expo start
   

   一樣進到專案後使用此指令開啟伺服器來執行。
5. 等待Bundling。
   
6. 出現 "PRESS ME" 這個藍藍的按鈕就是添加成功啦！
   
7. 但是按下按鈕後出現了錯誤！在手機上有錯誤會出現這樣的頁面，cmd裡面也會顯示有ERROR。
   
   
8. 這個錯誤是我們忘了匯入Alert，一樣在第2行加入Alert就行了！

   import { StyleSheet, Text, View, Button, Alert } from 'react-native';
   

9. 儲存程式碼後伺服器會自動更新，按下按鈕後出現這樣的畫面就是成功啦！
   

總結

今天學會了如何加入簡單的元件做互動，並知道了有Bug的時候會怎麼呈現、如何Debug，明天開始再一一加入其他不同的元件並實作功能來熟悉一下吧！

Github連結

AwesomeProject