React Native 键盘避让视图

摘要: 本教程将教你如何使用 React Native KeyboardAvoidingView 组件来增强应用程序的用户体验。

React Native KeyboardAvoidingView 组件简介

当用户将焦点放在 TextInput 上时，会显示一个虚拟键盘，这可能会隐藏输入字段和其他 UI 组件。这会导致糟糕的用户体验，因为他们无法正确查看或输入表单数据。

例如，在以下应用程序中，虚拟键盘会在 iOS 上完全隐藏 TextInput 组件。

import { StyleSheet, Text, View, SafeAreaView, TextInput } from 'react-native'

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.title}>JavaScriptTutorial.net</Text>
            <View style={styles.field}>
                <Text style={styles.label}>Name:</Text>
                <TextInput placeholder="Enter your name" style={styles.input} />
            </View>
        </SafeAreaView >
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 16,
    },
    title: {
        fontSize: 28,
        textAlign: 'center',
        marginBottom: 16,
    },
    field: {
        marginTop: 'auto',
    },
    label: {
        marginBottom: 8,
        fontSize: 16,
    },
    input: {
        height: 40,
        marginBottom: 16,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 8,
        padding: 8,
        fontSize: 16,
    },

});

export default App;Code language: JavaScript (javascript)

切换到 iOS 并将焦点移动到 TextInput，您将注意到问题。

为了解决这个问题，您可以使用 KeyboardAvoidingView 组件来确保 TextInput 在虚拟键盘出现时仍然可见。

KeyboardAvoidingView 组件会根据虚拟键盘的高度自动调整其高度、位置或底部填充，以确保在显示虚拟键盘时仍然可见。

要使用 KeyboardAvoidingView 组件

首先，从 react-native 库导入 KeyboardAvoidingView。

import { KeyboardAvoidingView } from 'react-native';Code language: JavaScript (javascript)

其次，将要保持可见的区域（在显示虚拟键盘时）包装在 KeyboardAvoidingView 组件中。

<KeyboardAvoidingView>
   {/* UI components */}
</KeyboardAvoidingView>Code language: JavaScript (javascript)

KeyboardAvoidingView 有一个重要的属性，名为 behavior，它定义了它应该如何对虚拟键盘的存在做出反应。您可以使用此属性指定 KeyboardAvoidingView 应该根据不同的平台（如 iOS 和 Android）如何表现。

以下是 React Native 团队的建议

<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}>
</KeyboardAvoidingView>Code language: HTML, XML (xml)

为了解决我们应用程序的问题，我们可以将表单包装在 KeyboardAvoidingView 中，如下所示

import { StyleSheet, Text, View, SafeAreaView, TextInput, KeyboardAvoidingView, Platform } from 'react-native'

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} style={styles.container}>
                <Text style={styles.title}>JavaScriptTutorial.net</Text>
                <View style={styles.field}>
                    <Text style={styles.label}>Name:</Text>
                    <TextInput placeholder="Enter your name" style={styles.input} />
                </View>
            </KeyboardAvoidingView>
        </SafeAreaView >
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 16,
    },
    title: {
        fontSize: 28,
        textAlign: 'center',
        marginBottom: 16,
    },
    field: {
        marginTop: 'auto',
    },
    label: {
        marginBottom: 8,
        fontSize: 16,
    },
    input: {
        height: 40,
        marginBottom: 16,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 8,
        padding: 8,
        fontSize: 16,
    },

});

export default App; Code language: JavaScript (javascript)

当您切换到 iOS 并将焦点放在 TextInput 上时，虚拟键盘会显示并向上推 TextInput 组件，确保 TextInput 仍然可见以输入数据。

总结

• 使用 KeyboardAvoidingView 组件来包装您的表单元素，以确保表单在虚拟键盘出现时仍然可见。