How to move screen up on textinput in react native

在React Native应用程序中，当文本输入位于屏幕较低位置时，弹出的键盘可能会遮挡输入区域。为了解决这个问题，可以使用以下几种方法：

使用KeyboardAvoidingView组件

React Native 提供了一个内置组件叫做KeyboardAvoidingView，这个组件可以自动调整内部视图的位置，以避免被键盘遮挡。

jsx
import React from 'react';
import { KeyboardAvoidingView, TextInput, StyleSheet } from 'react-native';

const ExampleScreen = () => {
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === "ios" ? "padding" : "height"}
    >
      <TextInput style={styles.textInput} placeholder="这里输入内容"/>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  textInput: {
    borderWidth: 1,
    borderColor: 'gray',
    padding: 10,
    margin: 20,
  },
});

export default ExampleScreen;

使用ScrollView组件

如果你的视图中已经包含了ScrollView，可以通过确保TextInput是ScrollView的子元素，并且设置keyboardShouldPersistTaps属性为handled或always，以允许用户在键盘显示时点击屏幕其他地方而不关闭键盘。

jsx
import React from 'react';
import { ScrollView, TextInput, StyleSheet } from 'react-native';

const ExampleScreen = () => {
  return (
    <ScrollView
      style={styles.container}
      keyboardShouldPersistTaps='handled'
    >
      <TextInput style={styles.textInput} placeholder="这里输入内容"/>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textInput: {
    borderWidth: 1,
    borderColor: 'gray',
    padding: 10,
    margin: 20,
    marginTop: 600, // 使输入框靠近屏幕底部，以模拟被键盘遮挡的情况
  },
});

export default ExampleScreen;

使用第三方库

react-native-keyboard-aware-scroll-view 是一个流行的第三方库，专门用来解决键盘遮挡输入框的问题。它提供了 KeyboardAwareScrollView 和 KeyboardAwareFlatList 组件，使用起来非常简单。

jsx
import React from 'react';
import { TextInput } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

const ExampleScreen = () => {
  return (
    <KeyboardAwareScrollView>
      <TextInput placeholder="这里输入内容"/>
    </KeyboardAwareScrollView>
  );
};

export default ExampleScreen;

使用这个库时，你只需要将它包裹在你的布局外层，它会自动处理屏幕滚动的问题。

总结

避免键盘遮挡文本输入的方法有多种，可以根据自己的需求和布局情况选择合适的方法。在实际开发中，可能需要结合多种方法来确保最佳的用户体验。