React Native中的鍵盤處理技巧

在React Native中，處理鍵盤的技巧主要包括以下幾個方面：

1. 使用KeyboardAvoidingView組件：KeyboardAvoidingView是React Native提供的一個用于自動調整布局以適應鍵盤的組件。當鍵盤彈出時，它會自動重新布局其子組件，以避免被鍵盤遮擋。你可以將需要避免鍵盤遮擋的組件包裹在KeyboardAvoidingView中。
2. 使用SafeAreaView組件：SafeAreaView是另一個用于處理iOS設備上劉海和底部小黑條對布局影響的組件。與KeyboardAvoidingView不同，SafeAreaView主要用于處理屏幕邊緣的安全區域，而不是鍵盤。但是，在某些情況下，將SafeAreaView與KeyboardAvoidingView結合使用可以更好地處理布局問題。
3. 監聽鍵盤事件：你可以使用Keyboard的addListener方法來監聽鍵盤的彈出和收起事件。通過監聽這些事件，你可以在鍵盤彈出時執行一些操作，例如滾動到輸入框、隱藏浮動操作欄等。
4. 使用自定義組件處理復雜布局：如果你的應用需要處理復雜的布局，可以考慮使用自定義組件來處理鍵盤事件和布局調整。通過自定義組件，你可以更好地控制布局的行為和樣式。

以下是一個簡單的示例，展示了如何使用KeyboardAvoidingView和TextInput組件處理鍵盤事件：

import React, { useRef } from 'react';
import { View, TextInput, KeyboardAvoidingView, Platform } from 'react-native';

const App = () => {
  const inputRef = useRef(null);

  const handleKeyboardDidShow = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={{ flexGrow: 1 }}
    >
      <View style={{ justifyContent: 'center', alignItems: 'center' }}>
        <TextInput
          ref={inputRef}
          placeholder="請輸入文字"
          onFocus={handleKeyboardDidShow}
        />
      </View>
    </KeyboardAvoidingView>
  );
};

export default App;

在這個示例中，我們使用了KeyboardAvoidingView組件來自動調整布局以適應鍵盤。當TextInput組件獲得焦點時，我們調用handleKeyboardDidShow方法來滾動到輸入框。注意，我們在KeyboardAvoidingView的style屬性中使用了flexGrow: 1來確保它占據整個屏幕的高度。