KeyboardAvoidingView 在 iOS 上无法正常工作，即使我尝试了包括文档在内的所有解决方案，也会做出本机反应

Question

I have a react native Expo project. Unfortunately I am blocked by an annoying problem.

This is how the view looks like:

When I click on the second input (Quantity) an empty blank space is added :(

Furthermore, when I click the second time on the input, the keyboard overlaps again

And this is the code:

<KeyboardAvoidingView style={{ flex: 1 }} behavior={"height"}>
  <View style={style.container}>
    <Header
      title={t("shoppingList.title")}
      view={AppView.SHOPPING_CART}
      onDelete={() => setConfirmMultipleDeleteModalVisible(true)}
      onSettings={() => setSettingsModalVisible(true)}
    />
    <SettingsModal
      visible={settingsModalVisible}
      onSave={onSaveSettings}
      onClose={() => setSettingsModalVisible(false)}
    />
    <View style={{ flex: 1 }}>
      <FlatList
        data={shoppingList}
        keyExtractor={(item, index) => index + ""}
        ListHeaderComponent={
          <ShoppingListTableHeader
            columns={columns}
            selectedColumn={selectedColumn}
            direction={direction}
            sort={sortTable}
          />
        }
        stickyHeaderIndices={[0]}
        renderItem={({ item, index }) => {
          return (
            <GestureHandlerRootView>
              <ConfirmMultipleDeleteModal
                visible={confirmMultipleDeleteModalVisible}
                items={shoppingList.filter(
                  (item) => selectedItemIds.indexOf(item.id) !== -1
                )}
                onDelete={multipleDeleteAndCloseConfirmModal}
                onClose={() => setConfirmMultipleDeleteModalVisible(false)}
              />

              <Pressable
                onPress={() => {
                  handleOnPress(item);
                  mark(index);
                }}
                onLongPress={() => {
                  selectItems(item);
                }}
              >
                <Card
                  style={{
                    ...generalStyles.card,
                    backgroundColor: index % 2 == 1 ? "#F0F0F0" : "white",
                  }}
                >
                  <View style={generalStyles.displayOnRow}>
                    {selectedItemIds.length > 0 && (
                      <Checkbox
                        status={
                          selectedItemIds.indexOf(item.id!) !== -1
                            ? "checked"
                            : "unchecked"
                        }
                        onPress={() => handleOnPress(item)}
                        color={"#585858"}
                        uncheckedColor={"black"}
                      />
                    )}
                    <ShoppingItem
                      item={item}
                      index={index}
                      marked={shoppingList[index].bought}
                    />
                  </View>
                  {selectedItemIds.indexOf(item.id!) !== -1 && (
                    <View style={generalStyles.overlay} />
                  )}
                </Card>
              </Pressable>
            </GestureHandlerRootView>
          );
        }}
      />
    </View>
    {addModalVisible ? (
      <AddShoppingListItem
        onSave={onSaveItem}
        onClose={() => setAddModalVisible(false)}
      />
    ) : (
      <MaterialCommunityIcons
        name={"cart-plus"}
        size={40}
        onPress={() => setAddModalVisible(true)}
        style={style.addIcon}
      />
    )}
    <StatusBar style="auto" />
  </View>
</KeyboardAvoidingView>

export const style = StyleSheet.create({ container: { flex: 1, paddingTop: 40, width: "100%", } });

I also tried to put the component inside

<KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>

but it didn't work :(

I am wondering ifit is related to the fact that I am using

createMaterialBottomTabNavigator();

Any suggestions, pleaseee?

Answer 1

The docs suggest using behavior='padding' on iOS. https://docs.expo.dev/versions/latest/react-native/keyboardavoidingview/

If that doesn't work for you, try experimenting with a negative keyboardVerticalOffset on the KeyboardAvoidingView.