React 检测到 Hook 调用的顺序发生了变化

Question

我刚刚开始学习 React Native，我正在尝试创建一个使用 NativeBase ActionSheet 组件的登录屏幕，但我不断收到一条错误，指出 React 已检测到调用的 Hooks 顺序发生了变化

我相信这是由于 fontsLoaded 布尔值以异步方式加载，但我不太确定。处理异步方法并确保屏幕正确加载的正确方法是什么？

这是我的代码：

function LoginScreen() {
let [fontsLoaded] = useFonts({
    HammersmithOne_400Regular,
})

if (!fontsLoaded) {
    return <AppLoading />;
}

const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();

return (
    <View style={styles.container}>
        <Text style={styles.logo}>Logo</Text>

        <View style={styles.signInContainer}>
            <Button onPress={onOpen} title="Log in">
                Log in
            </Button>
            <Actionsheet isOpen={isOpen} onClose={onClose}>
                <Actionsheet.Content>
                    <Box w="100%" h={60} px={4} justifyContent="center">
                        <Text>
                            Albums
                        </Text>
                    </Box>
                </Actionsheet.Content>
            </Actionsheet>
        </View>
    </View>
);

}

Answer 1

那么你违反了钩子规则，因为你在 if (!fontsLoaded) { return ; 之后有条件地调用 useDisclose 。 必须在组件

的顶层调用挂钩。

在这里您可以在 React 文档中找到有关所有钩子规则的更多信息：
https://reactjs.org/docs/hooks-rules.html

为了解决您的问题，您必须在 if 语句之前调用 useDisclose 。

Answer 2

将 useDisclose 挂钩移至顶部，将 if 语句移至下方。
原因如下 为什么

   let [fontsLoaded] = useFonts({
    HammersmithOne_400Regular,
})

const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();

if (!fontsLoaded) {
    return <AppLoading />;
}