所以，我試圖在 React Native 中使用 Hooks，但我對 React Native 很陌生，我不知道如何在類和函陣列件中正確使用 Hooks。但是在這個專案中，我使用的是Class組件，但是我得到了一個無效的鉤子呼叫的錯誤，那么如何將函陣列件的這個鉤子變成類組件。
這是我的代碼：
export default class Home extends Component {
render() {
let [fontsLoaded, error] = useFonts({
Raleway_100Thin,
Raleway_100Thin_Italic,
Raleway_200ExtraLight,
Raleway_200ExtraLight_Italic,
Raleway_300Light,
Raleway_300Light_Italic,
Raleway_400Regular,
Raleway_400Regular_Italic,
Raleway_500Medium,
Raleway_500Medium_Italic,
Raleway_600SemiBold,
Raleway_600SemiBold_Italic,
Raleway_700Bold,
Raleway_700Bold_Italic,
Raleway_800ExtraBold,
Raleway_800ExtraBold_Italic,
Raleway_900Black,
Raleway_900Black_Italic,
});
if (!fontsLoaded) {
return <AppLoading />;
}
return (
<View style={styles.container}>
{/* TITLE */}
<Text style={styles.title}>MALIGAYANG PAGDATING!</Text>
<Text style={styles.subtitle}>RECENTLY VIEWED</Text>
</View>
);
}
}
uj5u.com熱心網友回復：
您不能在類組件內使用鉤子。請參閱React 檔案中的Hooks 常見問題解答。
uj5u.com熱心網友回復：
像這樣使用
import React from 'react';
import { View, Text } from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts, Inter_900Black } from '@expo-google-fonts/inter';
export default function App() {
let [fontsLoaded] = useFonts({
Inter_900Black,
});
if (!fontsLoaded) {
return <AppLoading />;
}
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontFamily: 'Inter_900Black', fontSize: 40 }}>Inter Black</Text>
</View>
);
}
詳情在這里你也可以嘗試這種方式在這里
uj5u.com熱心網友回復：
您不能在類組件中使用鉤子。Hooks 是專為功能組件設計的。您可以將基于類的組件修改為基于功能的組件，如下所示并使用它。
// Imports
function Home() {
const [fontsLoaded, error] = useFonts({
Raleway_100Thin,
Raleway_100Thin_Italic,
Raleway_200ExtraLight,
Raleway_200ExtraLight_Italic,
Raleway_300Light,
Raleway_300Light_Italic,
Raleway_400Regular,
Raleway_400Regular_Italic,
Raleway_500Medium,
Raleway_500Medium_Italic,
Raleway_600SemiBold,
Raleway_600SemiBold_Italic,
Raleway_700Bold,
Raleway_700Bold_Italic,
Raleway_800ExtraBold,
Raleway_800ExtraBold_Italic,
Raleway_900Black,
Raleway_900Black_Italic,
});
return fontsLoaded ? (
<View style={styles.container}>
{/* TITLE */}
<Text style={styles.title}>MALIGAYANG PAGDATING!</Text>
<Text style={styles.subtitle}>RECENTLY VIEWED</Text>
</View>
) : (
<AppLoading />
);
}
export default Home;
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454502.html