Action Sheet 的初始位置位于屏幕顶部 Android React Native Glue Stack 界面

Action Sheet's initial position is at the top of the screen Android React Native Glue Stack UI

提问人:ColstonBod-oy 提问时间:11/17/2023 最后编辑:ColstonBod-oy 更新时间:11/17/2023 访问量:26

问:

我正在使用 Expo React Native 和一个名为 Glue Stack UI 的 UI 库处理我的项目,当我添加 Popover 或 Actionsheet 时,打开的内容的初始位置总是从屏幕的中心或上方开始,分别是 Popover Actionsheet,然后弹回其触发按钮的正确位置(这是橙色邮件按钮))我不知道是什么导致了这种行为,但我认为这是因为Android或React Native的设置方式。有什么建议的修复方法吗?

我能够找到一个有点相关的问题:https://github.com/SteffeyDev/react-native-popover-view/issues/28 但我不确定它是否是我问题的解决方案,因为它使用的是旧的 react 约定。

我还尝试删除了 messagesScreenContainer 样式,该样式将屏幕上的每个元素居中,但同样的问题仍然存在。

enter image description here enter image description here

除了将 Button 替换为 Fab 按钮之外,我几乎使用了 Glue Stack UI 代码的 Actionsheet 文档中的确切代码模板:

export default function MessagesScreen() {
    const [isLoading, setIsLoading] = useState(true);
    const [showActionsheet, setShowActionsheet] = useState(false);
    const handleClose = () => setShowActionsheet(!showActionsheet);
    useEffect(() => {
        setTimeout(() => {
            setIsLoading(false);
        }, 2000);
    }, []);
    return (
        <View style={styles.messagesScreenContainer}>
            {isLoading ? (
                <Spinner size={"xl"} color={"#EC472E"} />
            ) : (
                <Box h={"95%"} w={"95%"} borderRadius="$md">
                    <VStack space="md">
                        <Alert
                            mx="$2.5"
                            action="info"
                            variant="accent"
                            bg="$info200"
                            borderColor="$info700"
                        >
                            <AlertIcon as={InfoIcon} mr="$3" color="$info700" />
                            <AlertText color="$textLight900">
                                Suspect is small. May have robbed a couple of trash cans. We
                                los...
                            </AlertText>
                        </Alert>
                        <Alert
                            mx="$2.5"
                            action="warning"
                            variant="accent"
                            bg="$warning200"
                            borderColor="$warning700"
                        >
                            <AlertIcon as={AlertOctagon} mr="$3" color="$warning700" />
                            <AlertText color="$textLight900">
                                so my husband climbed up to get the cat and now he's stuck
                                too...
                            </AlertText>
                        </Alert>
                        <Alert
                            mx="$2.5"
                            action="error"
                            variant="accent"
                            bg="$error200"
                            borderColor="$error700"
                        >
                            <AlertIcon as={AlertTriangle} mr="$3" color="$error700" />
                            <AlertText color="$textLight900">
                                over turned vehicle, flames showing, and body parts everywhere,
                                how...
                            </AlertText>
                        </Alert>
                    </VStack>
                    <Fab
                        bg="#EC472E"
                        size="lg"
                        placement="bottom right"
                        onPress={handleClose}
                    >
                        <FabIcon as={MailPlus} size="xl" />
                    </Fab>
                    <Actionsheet
                        isOpen={showActionsheet}
                        onClose={handleClose}
                        zIndex={999}
                    >
                        <ActionsheetBackdrop />
                        <ActionsheetContent h="$72" zIndex={999}>
                            <ActionsheetDragIndicatorWrapper>
                                <ActionsheetDragIndicator />
                            </ActionsheetDragIndicatorWrapper>
                            <ActionsheetItem onPress={handleClose}>
                                <ActionsheetItemText>Delete</ActionsheetItemText>
                            </ActionsheetItem>
                            <ActionsheetItem onPress={handleClose}>
                                <ActionsheetItemText>Share</ActionsheetItemText>
                            </ActionsheetItem>
                            <ActionsheetItem onPress={handleClose}>
                                <ActionsheetItemText>Play</ActionsheetItemText>
                            </ActionsheetItem>
                            <ActionsheetItem onPress={handleClose}>
                                <ActionsheetItemText>Favourite</ActionsheetItemText>
                            </ActionsheetItem>
                            <ActionsheetItem onPress={handleClose}>
                                <ActionsheetItemText>Cancel</ActionsheetItemText>
                            </ActionsheetItem>
                        </ActionsheetContent>
                    </Actionsheet>
                </Box>
            )}
        </View>
    );
}
const styles = StyleSheet.create({
    messagesScreenContainer: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
    },
});
javascript android reactjs react-native expo

评论


答:

0赞 ColstonBod-oy 11/21/2023 #1

此行为是一个错误,请检查:https://github.com/gluestack/gluestack-ui/issues/1301