如何让 KeyboardAvoidingView 与多个输入很好地配合答案

【问题标题】：How to get KeyboardAvoidingView working nicely with multiple inputs如何让 KeyboardAvoidingView 与多个输入很好地配合
【发布时间】：2021-11-16 20:53:55
【问题描述】：

您好，我在使用多个输入时遇到了 KeyboardAvoidingView 问题：

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

const KeyboardAvoidingComponent = () => {
    return (
        <KeyboardAvoidingView
            behavior={Platform.OS === "ios" ? "padding" : "height"}
            style={styles.container}
        >
            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                <View style={styles.inner}>
                    <Text style={styles.header}>Header</Text>
                    <TextInput placeholder="Username" style={styles.textInput}/>
                    <TextInput placeholder="Username" style={styles.textInput}/>
                    <TextInput placeholder="Username" style={styles.textInput}/>
                    <TextInput placeholder="Username" style={styles.textInput}/>
                    <TextInput placeholder="Username" style={styles.textInput}/>
                    <TextInput placeholder="Username" style={styles.textInput}/>
                    <TextInput placeholder="Username" style={styles.textInput}/>
                    <View style={styles.btnContainer}>
                        <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;

在我选择输入框之前布局是正确的：

但是当我点击一个输入时，整个输入集就会崩溃，将每个框都挤成一个整体，无法准确读取我输入的位置：

如果您知道我如何才能做到这一点。谢谢。

【问题讨论】：

标签： reactjs view keyboard native

【解决方案1】：

我建议你使用键盘感知滚动视图，只需运行npm i react-native-keyboard-aware-scroll-view

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
    
    <KeyboardAwareScrollView>
      <View>
        <TextInput />
      </View>
    </KeyboardAwareScrollView>

这里有更多信息和使用https://github.com/APSL/react-native-keyboard-aware-scroll-view

【讨论】：

谢谢你。