在React Native中使用 KeyboardAwareScrollView 和 KeyboardAvoidingView

迪鲁宾
3,456 阅读4分钟

在React Native中开发移动屏幕时，需要考虑的最重要的事情之一就是滚动。在网页上，当内容超过屏幕尺寸时，滚动会被浏览器自动处理。你也可以使用CSS的溢出属性来处理网络上的滚动行为。

然而，React Native并不是这样的。在React Native中，你必须通过使用react native提供的ScrollView组件或通过第三方组件（如KeyboardAwareScrollView 、KeyboardAwareSectionList 、KeyboardAwareFlatList ）来处理滚动问题。

什么是KeyboardAwareScrollView 和KeyboardAvoidingView ？

作为一般的经验法则，当你的内容大于设备高度时，你应该使用react-native-keyboard-aware-scroll-view包所提供的组件，这样你的屏幕就可以滚动。

然而，当你不需要屏幕上的滚动，但需要确保输入字段不会隐藏在键盘后面时，你应该使用 [KeyboardAvoidingView](https://reactnative.dev/docs/keyboardavoidingview)控件，该控件由React Native提供。

下面是几个使用KeyboardAvoidingView ，以及react-native-keyboard-aware-scroll-view的例子。

在React Native中使用KeyboardAvoidingView

当你的屏幕上有输入字段时，你不希望键盘出现在它们前面，否则，用户将无法看到输入字段。

为了处理这种情况，你要使用KeyboardAvoidingView ，这样只要键盘打开，你的焦点字段就会向上抬起，出现在键盘上方。

让我们先看看我们要用KeyboardAvoidingView 来解决的问题的例子。考虑一下下面这个组件，我们有几个文本字段，但它们没有与KeyboardAvoidingView 。

import React from 'react';
import {
  View,
  KeyboardAvoidingView,
  TextInput,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  Button,
  Keyboard,
} from 'react-native';
const KeyboardAvoidingComponent = () => {
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View style={styles.inner}>
        <Text style={styles.header}>Header</Text>
        <TextInput placeholder="Username" style={styles.textInput} />
        <View style={styles.btnContainer}>
          <TextInput placeholder="Password" style={styles.textInput} />
          <Button title="Submit" onPress={() => null} />
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: 'space-around',
  },
  header: {
    fontSize: 36,
    marginBottom: 48,
  },
  textInput: {
    height: 40,
    borderColor: '#000000',
    borderBottomWidth: 1,
    marginBottom: 36,
  },
  btnContainer: {
    backgroundColor: 'white',
    marginTop: 12,
  },
});
export default KeyboardAvoidingComponent;

上述组件产生的行为如下。

Input Field Covered by Keyboard

正如你所看到的，当键盘打开时，输入字段变得隐藏在键盘后面。这是一个问题，而这正是KeyboardAvoidingView 来拯救的地方。

让我们看看如何将文本字段包裹在KeyboardAvoidingView 。

考虑一下下面这个组件，我们把一些文本字段包裹在KeyboardAvoidingView 。

import React from 'react';
import {
  View,
  KeyboardAvoidingView,
  TextInput,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  Button,
  Keyboard,
} from 'react-native';
const KeyboardAvoidingComponent = () => {
  return (
    <KeyboardAvoidingView behavior="padding" style={styles.container}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.inner}>
          <Text style={styles.header}>Header</Text>
          <TextInput placeholder="Username" style={styles.textInput} />
          <View style={styles.btnContainer}>
            <TextInput placeholder="Username" style={styles.textInput} />
            <Button title="Submit" onPress={() => null} />
          </View>
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: 'space-around',
  },
  header: {
    fontSize: 36,
    marginBottom: 48,
  },
  textInput: {
    height: 40,
    borderColor: '#000000',
    borderBottomWidth: 1,
    marginBottom: 36,
  },
  btnContainer: {
    backgroundColor: 'white',
    marginTop: 12,
  },
});
export default KeyboardAvoidingComponent;

上述组件产生的行为如下。

Input Field Lifted Above by Keyboard

正如你在上面看到的，当键盘打开时，输入字段被抬到了键盘上方，因为我们用KeyboardAvoidingView 包装了我们的组件。

当我们知道我们的内容不会超过设备的高度时，KeyboardAvoidingView 效果很好。然而，总有一些设计是内容多于设备高度的。

在这种情况下，KeyboardAvoidingView 不会对你有什么帮助。这就是KeyboardAwareScrollView 的用处。让我们在下一节中了解一下KeyboardAwareScrollView 。

在React Native中实现KeyboardAwareScrollView

与KeyboardAvoidingView 不同，KeyboardAwareScrollView 使你的整个屏幕可以滚动。你可以添加尽可能多的组件，你仍然能够滚动屏幕。

如果你不使用KeyboardAwareScrollView ，而你的内容又不适合放在屏幕上，你的内容就会被截断，用户就无法滚动。

通过使用KeyboardAwareScrollView ，你的整个屏幕变得可以滚动。此外，它可以自动处理输入字段的焦点，并在打开键盘时将字段向上抬起。

考虑一下下面的组件，我们将一些文本字段包裹在KeyboardAwareScrollView 。

import React from 'react';
import {
  View,
  KeyboardAvoidingView,
  TextInput,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  Button,
  Keyboard,
} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
const KeyboardAwareScrollViewComponent = () => {
  return (
    <KeyboardAwareScrollView>
      <View style={styles.inner}>
        <Text style={styles.header}>Header</Text>
        <TextInput placeholder="Username" style={styles.textInput} />
        <View style={styles.btnContainer}>
          <TextInput placeholder="Username 1" style={styles.textInput} />
          <TextInput placeholder="Username 2" style={styles.textInput} />
          <TextInput placeholder="Username 3" style={styles.textInput} />
          <TextInput placeholder="Username 4" style={styles.textInput} />
          <TextInput placeholder="Username 5" style={styles.textInput} />
          <TextInput placeholder="Username 6" style={styles.textInput} />
          <TextInput placeholder="Username 7" style={styles.textInput} />
          <TextInput placeholder="Username 8" style={styles.textInput} />
          <TextInput placeholder="Username 9" style={styles.textInput} />
          <TextInput placeholder="Username 10" style={styles.textInput} />
          <TextInput placeholder="Username 11" style={styles.textInput} />
          <TextInput placeholder="Username 12" style={styles.textInput} />
          <TextInput placeholder="Username 13" style={styles.textInput} />
          <Button title="Submit" onPress={() => null} />
        </View>
      </View>
    </KeyboardAwareScrollView>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: 'space-around',
  },
  header: {
    fontSize: 36,
    marginBottom: 48,
  },
  textInput: {
    height: 40,
    borderColor: '#000000',
    borderBottomWidth: 1,
    marginBottom: 36,
  },
  btnContainer: {
    backgroundColor: 'white',
    marginTop: 12,
  },
});
export default KeyboardAwareScrollViewComponent;

当键盘被打开时，上面的组件将把文本字段推到键盘上方，像这样。

Text Fields Raised Above Keyboard

KeyboardAwareScrollView 接受了ScrollView的所有道具。此外，在react-native-keyboard-aware-scroll-view包中，还有其他可用的组件，如KeyboardAwareSectionList 和KeyboardAwareFlatList 。你可以在这里查看这些组件的props列表。

总结

在本教程中，我们介绍了什么是KeyboardAvoidingView 和KeyboardAwareScrollView ，以及如何使用它们。记住，这些组件有不同的用途。

使用KeyboardAvoidingView 组件的主要目的是为了确保你的输入字段不会隐藏在键盘后面。这样做的目的是，只要用户点击文本字段，键盘就会打开，字段就会向上抬起，显示在键盘上方。

另一方面，KeyboardAwareScrollView 有两个不同的目的。

  1. 它用ScrollView ，使屏幕变得可滚动。
  2. 当键盘打开时，它将输入字段抬起。

可以说，KeyboardAwareScrollView 是KeyboardAvoidingView 的超集。在大多数情况下，使用KeyboardAwareScrollView 就足够了，因为它可以处理滚动和键盘行为。你应该只在你不希望用户滚动的屏幕上使用KeyboardAvoidingView 。谢谢你的阅读!

The postUsing KeyboardAwareScrollView and KeyboardAvoidingView in React Nativeappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝