реагировать нативно, используя KeyboardAvoidingView с FlatList - PullRequest
Новая
       13

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

0 голосов
/ 05 октября 2019

Я хочу использовать <KeyboardAvoidingView>, чтобы выдвинуть плоский список, заполненный полем ввода, когда клавиатура появится. Код выглядит так: 

<SafeAreaView style={styles.container}>
    <KeyboardAvoidingView behavior="height" style={{flex: 1}} >
        <View style={{flex: 12}}>
            <FlatList
            data={DATA}
            renderItem={({ item }) => <Item title={item.title} />}
            keyExtractor={item => item.id}
            style={{marginTop: 10}}
            />
        </View>
        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-around', alignContent: 'center', alignItems: 'center' }}>
            <Icon style={{ color: "white", flex: 1, padding: 10 }} type="AntDesign" name="arrowleft"/>
            <TextInput
                placeholder="Create new item..."
                style={{flex: 10, backgroundColor: "white", borderRadius: 50, padding: 10, margin: 5}}
            />
        </View>
    </KeyboardAvoidingView>
</SafeAreaView>

Результат таков:

enter image description here

Красный квадрат на правой картинке - это гдеполе ввода застряло. Похоже, что по крайней мере немного переехал. Плоский список однако отказался сдвинуться с места. Я ожидаю получить опыт работы в стиле WhatsApp, когда поле ввода зависает над клавиатурой, а плоский список перемещается вверх, чтобы вы могли видеть текст, который был на экране, прежде чем открывать клавиатуру. Я пробовал разные вещи, такие как <KeyboardAwareFlatList /> и <KeyboardSpacer />, однако ни одна из них не была признана успешной.

Это просто я что-то забыл или это просто неправильный способ использования <KeyboardAvoidingView> для этого случая?

...