KeyboardAvoidingView 在 iOS 中无法正常工作

Question

我无法让我的 KeyboardAvoidingView 在我的 react-native 应用的 iOS 版本上正确注册。它嵌套在我的 ListFooterComponent 的 Flatlist 的另一个视图中。该行为在 Android 上相对正常，但在 iOS 上则完全不工作。

我尝试过的事情：

1. 更改 behavior 道具（所有 3 个道具最终都不起作用）
2. 更改 keyboardVerticalOffset 属性（没有任何偏移量可以改变任何东西，它只是在屏幕底部添加了一堆填充）
3. 将我的KeyboardAvoidingView 标签移动到ListFooterComponent 的最外层视图。没有区别
4. 在内部和外部组件中添加flex: 1

我看到其他帖子推荐使用其他键盘避免库，但由于这是一个 Expo 托管项目，我认为这些对我不起作用。有关如何仅使用 KeyboardAvoidingView 组件来完成此操作的任何建议？

这是iOS上没有键盘的屏幕截图：this

这是在 iOS 上使用键盘的屏幕截图：this

这是代码：

        <SafeAreaView style={{ flex: 1 }}>

        <FlatList
            data={commentData}
            style={{ flex: 1 }}
            keyboardDismissMode={'on-drag'}
            keyboardShouldPersistTaps={'always'}
            keyExtractor={item => (item.id)}
            renderItem={({ item }) => {
                return (
                    <>

                    </>
                )
            }}
            ListFooterComponent={() => {
                return (
                    <>
                        <View style={{ borderColor: "#D6DCE8", marginBottom: 0, borderTopWidth: 2, marginTop: 25, shadowColor: "#000", shadowRadius: 2, shadowOpacity: 0.25, shadowOffset: { width: 0, height: 2 }, elevation: 5 }} />
                        <View style={{ flex: 1, flexDirection: 'row', paddingTop: 15, paddingBottom: 15 }}>
                            <TouchableOpacity delayPressIn={20}>
                                <View style={styles.commentImage}>
                                    <Image source={{ uri: myProfilePicture }} style={styles.image}></Image>
                                </View>
                            </TouchableOpacity>
                            <KeyboardAvoidingView
                                behavior={Platform.OS === "ios" ? "padding" : "height"}
                                keyboardVerticalOffset={Platform.select({ ios: 100, android: 500 })}
                                style={{ flex: 1, backgroundColor: '#ECECEC', borderRadius: 10, flex: 0.95, paddingVertical: 5, marginLeft: 10 }}>
                                <TextInput style={{
                                    fontSize: 14,
                                    fontWeight: '500',
                                    paddingHorizontal: 10,
                                    marginHorizontal: 10,
                                    paddingVertical: 6,
                                    flex: 1,
                                    flexDirection: 'row',
                                    flexWrap: 'wrap'
                                }}
                                    ref={commentRef}
                                    multiline={true}
                                    blurOnSubmit={true}
                                    numberOfLines={2}
                                    onFocus={() => commentRef.current = true}
                                    onBlur={() => commentRef.current = false}
                                    placeholder="Leave a comment..."
                                    defaultValue={comment}
                                    onChangeText={(newValue) => { comment = newValue }}
                                    onSubmitEditing={() => submitComment()} />
                            </KeyboardAvoidingView>
                        </View>
                        <View style={Platform.OS === 'android' ? { marginBottom: 200 } : { marginBottom: 100 }} />
                    </>
                )
            }}
            ListHeaderComponent={() => {
                return (
                    <>

                    </>
                )
            }}
        />

    </SafeAreaView>

Answer 1

请尝试使用KeyboardAvoidingView 作为屏幕中的顶级组件。这似乎是您的布局的正确方法。

一些注意事项：

• padding 行为应该是你想要的
• keyboarVerticalOffset 如果您的视图嵌套在导航器内（例如来自 react-navigation）并且导航栏或标签栏可见，则很有用 - 然后您应该将值设置为这些栏的高度
• 在 Android 上禁用它（除非您在清单中禁用了键盘/软输入处理）。