import React, { useRef } from 'react';
  import { View, TextInput, Button, Alert } from 'react-native';
  function UncontrolledInput() {
    // 使用ref來直接引用TextInput組件
    const inputRef = useRef(null);
    const handleShowValue = () => {
      // 使用ref直接存取TextInput的值
      if (inputRef.current) {
        Alert.alert("Current Value", inputRef.current.value || '');
    return (
      <View style={{ padding: 10 }}>
        <TextInput 
          ref={inputRef}  // 設置ref
          style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        <Button title="Show Value" onPress={handleShowValue} />
      </View>
使用 React state 來保存 TextInput 的值。
當用戶在 TextInput 中輸入時，onChangeText 被觸發。
在 onChangeText 的回調中，React state 更新為新的輸入值。
由於 state 變化，組件重新渲染。
重新渲染時，TextInput 的值被設置為新的 state。
原生 TextInput 被告知要更新其顯示值（來自JS層的state）。
原生 TextInput 更新其顯示。
import React, { useState } from 'react';
import { View, TextInput } from 'react-native';
function ControlledInput() {
  // 使用state來保存當前的輸入值
  const [value, setValue] = useState('');
  return (
    <View style={{ padding: 10 }}>
      <TextInput 
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        value={value}  // 當前的輸入值是由state控制的
        onChangeText={text => setValue(text)}  // 當輸入變化時，更新state的值
    </View>
以性能的角度看，非受控看起來很香，但除非是簡單的場景，不然一般建議還是使用受控組件。非受控組件因為不在React 中處理 state，維護上可能會造成程式碼邏輯不好釐清，尤其程式碼越來越複雜時，會越明顯。
輸入框焦點
自動對焦對於使用者體驗有不小的提升。例如，當一個頁面載入時，讓特定的輸入框自動獲得焦點，可以簡化使用者操作步驟：
單個輸入框： 使用方法很簡單，將autoFocus設為true即可
<TextInput autoFocus/>
多個輸入框： 友善的做法是自動將焦點從一個輸入框移至下一個。這樣當使用者完成一個輸入框的輸入後，可以直接跳到下一個，無需手動點擊：
function SequentialFocusTextInputs() {
  const firstInputRef = React.useRef<TextInput>(null);
  const secondInputRef = React.useRef<TextInput>(null);
  const thirdInputRef = React.useRef<TextInput>(null);
  return (
      <TextInput ref={firstInputRef} onSubmitEditing={() => secondInputRef.current?.focus()} /> // 姓名
      <TextInput ref={secondInputRef} onSubmitEditing={() => thirdInputRef.current?.focus()} /> // 電話
      <TextInput ref={thirdInputRef} /> // 地址
在上述例子中，我們為每個輸入框設定了一個ref。然後利用onSubmitEditing事件，在使用者按下鍵盤的完成鍵後，自動將焦點轉移到下一個輸入框。
onSubmitEditing屬性：在TextInput組件中，onSubmitEditing是一個回調，它會在使用者按下鍵盤的完成或提交鍵時觸發。讓我們可以執行特定的操作，如將焦點轉移到下一個輸入框。
我可以根據不同情境優化使用不同的鍵盤。
鍵盤類型
keyboardType屬性允許我們為輸入框設定不同的鍵盤類型，如數字、電子郵件地址等，以提供更具情境的輸入體驗：
default： 標準鍵盤。
numeric： 數字鍵盤。
email-address： 為輸入電子郵件設計的鍵盤。
phone-pad： 電話號碼鍵盤。
<TextInput keyboardType="email-address" />
提示鍵設定
使用returnKeyType屬性來控制鍵盤上的提示鍵文案：
default： 預設，通常顯示為return。
done： 顯示為“done”，適合用在最後一個輸入框。
go： 顯示為go”，適用於網址輸入框或跳轉操作。
next： 顯示為“next”，適合用於切換到下一個輸入框。
search： 顯示文案為“search”，用於搜索欄位。
send： 顯示文案為“send”，尤其適合於聊天界面。
<TextInput style={styles.input} returnKeyType="send" />