React Native的键盘弹出与布局调整

在React Native中，当软键盘弹出时，可能会导致布局发生变化。为了解决这个问题，你可以使用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及更早版本中可能不受支持。如果你使用的是这些版本，请考虑升级到最新版本。