使用带有FlatList的KeyboardAvoidingView进行本机反应

Question

我想使用<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>

结果是这样的：

右图中的红色方块是输入字段滞留的位置。似乎至少移动了一点。然而，单位列表拒绝让步。我的期望是获得类似于whatsapp的体验，其中inputfield悬停在键盘上方，并且flatlist被向上推，因此您可以在打开键盘之前查看屏幕上的文本。 我尝试了诸如<KeyboardAwareFlatList />和<KeyboardSpacer />之类的各种方法，但是都没有成功。

这仅仅是我忘记了什么吗，还是这不是在这种情况下使用<KeyboardAvoidingView>的正确方法吗？