在Action Sheet组件中使用KeyboardAvoidingView失效问题求助

直接给你几个关键调整方案，亲测有效：

1. 调整KeyboardAvoidingView的层级与样式 #

把KeyboardAvoidingView放在最外层，给它设置flex:1，确保它能正确感知Action Sheet的容器高度。同时针对iOS和Android优化behavior和偏移值——Action Sheet本身有顶部间距，iOS的verticalOffset要调大（比如80，可根据你的Action Sheet实际高度微调）。

2. 给表单添加滚动容器 #

在SafeAreaView外面套一层ScrollView，防止键盘弹出后内容溢出，同时让KeyboardAvoidingView的调整更顺畅。

3. 修正嵌套结构 #

把TouchableWithoutFeedback移到ScrollView内部，避免影响整个容器的布局计算。

修改后的代码示例：

import { ScrollView } from 'react-native';

return (
  <KeyboardAvoidingView
    style={{ flex: 1 }}
    behavior={Platform.OS === "ios" ? "padding" : "height"}
    keyboardVerticalOffset={Platform.OS === "ios" ? 80 : 20}
  >
    <VStack mx={8} flex={1}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <SafeAreaView style={{ gap: 12 }}>
            <Input
              placeholder="name"
              onChangeText={setName}
              value={name}
              w="full"
            />
            <Input
              placeholder="email"
              onChangeText={setEmail}
              value={email}
              w="full"
            />

            <VStack w="full">
              <SelectList
                placeholder="Tipo Sanguíneo"
                inputStyles={{
                  color: "#777272",
                  fontSize: 14,
                  padding: 0,
                }}
                setSelected={(val: string) => setSelected(val)}
                onSelect={() => console.log(selected)}
                data={roles.map((item) => item.name)}
                save="value"
                search={false}
                boxStyles={{
                  borderWidth: 0.5,
                  borderColor: "#80808060",
                  height: 43,
                  borderRadius: 3,
                }}
                dropdownStyles={{
                  bottom: 5,
                  borderWidth: 0.5,
                  borderColor: "#80808060",
                  borderRadius: 3,
                  paddingVertical: 0,
                  margin: 0,
                }}
                dropdownTextStyles={{
                  fontSize: 12,
                  padding: 0,
                }}
              />
            </VStack>

            <HStack my={5} space={3} alignSelf="center">
              <Button title="Cancelar" isOutline w="1/2" />
              <Button
                title="Adicionar"
                w="1/2"
                onPress={() =>
                  signUp({
                    name,
                    email,
                    roleId: selected,
                    bloodCenterId: authData?.bloodCenterId
                      ? authData?.bloodCenterId
                      : "",
                  }).then(childToParent(true))
                }
                textAlign="left"
                alignSelf="center"
              />
            </HStack>
          </SafeAreaView>
        </TouchableWithoutFeedback>
      </ScrollView>
    </VStack>
  </KeyboardAvoidingView>
);

额外说明 #

• keyboardVerticalOffset的值需要根据你的Action Sheet顶部实际高度微调，确保输入框刚好不被键盘挡住。
• 用ScrollView包裹是因为Action Sheet高度有限，键盘弹出后内容可能超出可视区域，滚动能保证所有表单元素都能被访问。
• 不要用behavior="position"，它会直接修改元素的position属性，极易导致布局变形，iOS用padding、Android用height是更稳妥的选择。

内容的提问来源于stack exchange，提问作者Luiza