React Native - перемещение экрана вверх в TextInput с помощью KeyboardAvoidingView

Question

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

        <KeyboardAvoidingView
            keyboardVerticalOffset={64}
            style={{ flex: 1 }}
        >
            <View style={styles.screen}>
                <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                    <TextInput
                        value={title}
                        onChangeText={text => setTitle(text)}
                        style={styles.singleLineTextInput}
                        placeholder="Title"
                    />

                    <TextInput
                        value={keywords}
                        onChangeText={text => setKeywords(text)}
                        style={styles.singleLineTextInput}
                        placeholder="Keywords"
                    />

                    <TextInput
                        value={description}
                        onChangeText={text => setDescription(text)}
                        style={{ ...styles.singleLineTextInput, ...styles.descriptionTextInput }}
                        placeholder="Description"
                        multiline={true}
                        autoFocus={true}
                    />
                </TouchableWithoutFeedback>
            </View>
        </KeyboardAvoidingView >

И мои стили:

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        padding: 16,
        alignItems: 'center'
    },
    singleLineTextInput: {
        width: DEVICE_WIDTH * 0.8,
        borderColor: 'black',
        borderBottomWidth: 2,
        fontSize: 16,
        paddingHorizontal: 16
    },
    descriptionTextInput: {
        maxHeight: DEVICE_HEIGHT / 4
    }
});

Я использую React-Navigation и попытался изменить поведение keyboardVertialOffset и для умножения значений, но ничего не происходит. Есть идеи?
Заранее спасибо

Answer 1

Импортировать контент из native-base как

import { Content } from 'native-base';

И импортировать платформу из Reaction-native

import { Platform } from 'react-native';

И использовать контент и платформу в вашем коде, например так:

    <KeyboardAvoidingView
           behavior={Platform.Os == "ios" ? "padding" : "height"} 
            style={{ flex: 1 }}
        ><Content>
            <View style={styles.screen}>
                <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                    <TextInput
                        value={title}
                        onChangeText={text => setTitle(text)}
                        style={styles.singleLineTextInput}
                        placeholder="Title"
                    />

                    <TextInput
                        value={keywords}
                        onChangeText={text => setKeywords(text)}
                        style={styles.singleLineTextInput}
                        placeholder="Keywords"
                    />

                    <TextInput
                        value={description}
                        onChangeText={text => setDescription(text)}
                        style={{ ...styles.singleLineTextInput, ...styles.descriptionTextInput }}
                        placeholder="Description"
                        multiline={true}
                        autoFocus={true}
                    />
                </TouchableWithoutFeedback>

            </View>
           </Content>

        </KeyboardAvoidingView>

Надеюсь, это поможет!