如何让 KeyboardAvoidingView 很好地处理多个输入

Question

您好，我在使用多个输入时 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;

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

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

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

Answer 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

如何让 KeyboardAvoidingView 很好地处理多个输入

How to get KeyboardAvoidingView working nicely with multiple inputs

keyboard

native

view

reactjs