我在设计此屏幕以使用 KeyboardAvoidingView 时遇到问题

Question

<KeyboardAvoidingView behavior="margin">
                <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
                    <View>
                        <View>
                            <FlatList
                                data={this.state.chatMessages}
                                renderItem={(itemData) => (
                                    <View>
                                        <Text>{itemData.item.value}</Text>
                                    </View>
                                )}
                                contentContainerStyle={{ padding: 10 }}
                            />
                        </View>
                        <View>
                            <TextInput
                                autoCorrect={false}
                                value={this.state.chatMessage}
                                onSubmitEditing={() => this.submitChatMessage()}
                                onChangeText={(chatMessage) => {
                                    this.setState({ chatMessage });
                                }}
                                style={{
                                    width: "100%",
                                    backgroundColor: "grey",
                                    borderColor: "#ccc",
                                    borderWidth: 1,
                                    borderRadius: 30,
                                    paddingHorizontal: 10
                                }}
                            />
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </KeyboardAvoidingView>

这是我尝试设置样式的屏幕，但 KeyboardAvoidingView 元素根本不起作用。我也试图将 TextInput 固定到屏幕底部，但我找不到可靠的方法来做到这一点。

（PS。我删除了所有旧样式）