接續上篇
在版面完成後
讓我們繼續完成登入功能吧

本篇會進入以下開發環節

• Components 事件處理
• useState 實際應用
• 登入基本防呆

將所有Components資料 紀錄到State

在React Native中
Render時就要決定好每個Component的State
也就是Component的值，沒有狀態管理，就不能與該元件互動

畫面上要存取的Component有：
帳號、密碼、記住登入資訊

let UserObject = {
  Account: "",
  Password: "",
  IsRemberMe: true,
};
const [loginInfo, setloginInfo] = useState(UserObject);

接著，在Component上綁定相對應的事件

TextInput、Switch狀態綁定方式

<TextInput  value={loginInfo.Account}
            onChangeText={(Account) =>
              setloginInfo({ ...loginInfo, Account: Account })
            }
            placeholder={"帳號"}
            className="px-3 py-2 border border-blue-300 rounded-md"/>
<TextInput  value={loginInfo.Password}
            onChangeText={(password) =>
              setloginInfo({ ...loginInfo, Password: password })
            }
            placeholder={"密碼"}
            secureTextEntry={true}
            className="px-3 py-2 border border-blue-300 rounded-md"/>
<Switch     value={loginInfo.IsRemberMe}
            onValueChange={(IsRemberMe) =>
              setloginInfo({ ...loginInfo, IsRemberMe: IsRemberMe })
              }/>

說明：
value可以決定輸入框的預設值
onChangeText則是在輸入框輸入、刪除文字時，所觸發的事件
也就是輸入一個字，就會觸發onChangeText

setloginInfo將Account存進loginInfo裡
此時，loginInfo已有剛剛輸入帳號的資料
這邊使用 展開運算符與其餘運算符 語法
在不影響其他物件資訊，修改單一物件的值
(不太清楚...是什麼的話，可以點開連結詳細說明)

Switch 差別只在事件名稱為onValueChange，在選擇/取消選擇時觸發

「登入」事件

上方Component都存入State之後
最後就是取得帳號與密碼，做為登入驗證、防呆行為

<TouchableOpacity
          className="bg-indigo-700 rounded-lg my-3"
          onPress={onLogin}>
          <Text className="text-white text-xl px-5 py-3">登入</Text>
</TouchableOpacity>

與靜態畫面比起來 只多了onPress觸控事件
接著做一個簡單的onLogin function

function onLogin() {
    if (loginInfo.Account === "" || loginInfo.Password === "") {
      Alert.alert("登入失敗","請輸入使用者資訊");
      return false;
    } else{
      Alert.alert("訊息", "登入成功!");
    }
}

※React Native提供像Web一樣的Alert元件供開發者使用
記得將此元件import
這樣使用者未輸入帳號密碼 會有請輸入的提示視窗🔔

本篇不附上Expo Snack原始碼😓
若還是不太清楚事件處理的話
可以參考官方TouchableOpacity的Expo Snack範例

結語：
到這邊，你的APP在按下登入時
已經能提供最基本使用者驗證，並顯示相對應的訊息
下一篇，將完成整個登入功能
將使用者導向登入後的「首頁」。