Не могу понять, как правильно использовать KeyboardAvoidingView

Question

Я занимаюсь разработкой приложения с использованием собственного кода, у нас есть макеты экранов, сделанные нашим дизайнером.Но я не могу правильно реализовать ожидаемое поведение.В основном это экран с некоторыми текстовыми вводами и кнопкой, и мне нужно, чтобы что-то корректно корректировалось, когда клавиатура появляется.Вот ожидаемые экраны:

Поэтому, когда клавиатура поднимается, кнопка должна сильно подниматьсяоба текстовых ввода увеличиваются, а текст сверху остается на месте.Экран выглядит отлично без клавиатуры, но сейчас он ничего не делает, когда клавиатура поднимается.Я много чего перепробовал, ничего не получалось.Вот метод визуализации сейчас:

render() {
    const textInputBorderColor = this.state.hasError ? Colors.error : Colors.background;
    const textInputCpfMarginTop = this.state.hasError ? 24 : 48;

    return (
        <View style = {styles.container}>
            <KeyboardAvoidingView behavior='padding'>
                <Text style = {styles.headerText}>Vamos começar!</Text>

                <TextInput 
                    value = {this.props.user.name} 
            onChangeText = {text => this.props.user.name = text}
                    placeholder = 'Insira aqui seu nome completo'
                    style = {[styles.textInputName, {borderColor: textInputBorderColor}]}
                />

                <ErrorText show = {this.state.hasError} value = {this.state.errorMsg}/>

                <TextInputMask
                    value = {this.props.user.cpf}
                    onChangeText = {text => this.props.user.cpf = text}
                    placeholder = 'e aqui seu CPF'
                    keyboardType = 'numeric'
                    type = 'cpf'
                    style = {[styles.textInputCpf, {borderColor: Colors.background, marginTop: textInputCpfMarginTop}]}
                />

                <View style = {{marginTop: 202}}>
                    <DefaultButton 
                        onPress = {this.onButtonPress}
                        btnLabel = 'Continuar'
                        disabled = {(this.props.user.name == '' || this.props.user.cpf.length != 14)}
                    />
                </View>
            </KeyboardAvoidingView>
        </View>
    );
}

Стили:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF',
        alignItems: 'center',
    },

    textInputName: {
        textAlign: 'center',
        fontFamily: 'Roboto-Light',
        fontSize: 16,
        paddingBottom: ScreenDimensions.width * 0.01,
        borderBottomWidth: 1,
        marginTop: 96,
        width: 321
    },

    textInputCpf: {
        textAlign: 'center',
        fontFamily: 'Roboto-Light',
        fontSize: 16,
        paddingBottom: ScreenDimensions.width * 0.01,
        borderBottomWidth: 1,
        width: 321
    },

    headerText: {
        marginTop: 66,
        textAlign: 'center',
        fontFamily: 'Roboto-Light',
        fontSize: 20,
        color: '#000'
    }
})

Документация по этому компоненту (keyboardAvoidingView) бесполезна ...

Большое спасибоза любую помощь!

Answer 1

Попробуйте:

const keyboardAvoidingViewBehaviour = (Platform.OS === 'ios') ? 'padding' : null;

использовать KeyboardAvoiding представление в качестве корневого компонента, нет необходимости в дополнительном просмотре.

        <KeyboardAvoidingView 
           behavior={keyboardAvoidingViewBehaviour}
           style = {styles.container} // <-- have flex: 1 as one of the style props here
        >
            <Text style = {styles.headerText}>Vamos começar!</Text>

            <TextInput
            // ...

Если ваш контент требует прокруткихорошим вариантом будет:

react-native-keyboard-aware-scroll-view

https://github.com/APSL/react-native-keyboard-aware-scroll-view