React Native的鍵盤彈出與布局調整

在React Native中，當軟鍵盤彈出時，可能會導致布局發(fā)生變化。為了解決這個問題，你可以使用KeyboardAvoidingView組件來自動調整布局。KeyboardAvoidingView會將子組件在鍵盤彈出時向頂部或底部移動，以避免被鍵盤遮擋。

以下是如何使用KeyboardAvoidingView的示例：

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

const App = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}
    >
      <View style={styles.content}>
        <TextInput
          style={styles.input}
          placeholder="請輸入文字"
        />
        <Button title="提交" onPress={() => console.log('提交')} />
      </View>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    padding: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 16,
    paddingHorizontal: 8,
  },
});

export default App;

在這個示例中，我們使用了KeyboardAvoidingView作為根容器，并設置了behavior屬性。在iOS上，我們使用padding，而在Android上，我們使用height。這樣，當鍵盤彈出時，子組件會自動向上移動，避免被鍵盤遮擋。

注意：KeyboardAvoidingView在React Native 0.59及更早版本中可能不受支持。如果你使用的是這些版本，請考慮升級到最新版本。