提问人:ColstonBod-oy 提问时间:11/17/2023 最后编辑:ColstonBod-oy 更新时间:11/17/2023 访问量:26
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
问:
我正在使用 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 样式,该样式将屏幕上的每个元素居中,但同样的问题仍然存在。
除了将 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",
},
});
答:
0赞
ColstonBod-oy
11/21/2023
#1
此行为是一个错误,请检查:https://github.com/gluestack/gluestack-ui/issues/1301
评论