导入 expo 字体失败答案

【问题标题】：Fail Importing expo font导入 expo 字体失败
【发布时间】：2022-09-30 23:37:48
【问题描述】：

尝试使用 expo 字体导入字体时出现此错误。 null is not an object\" (evaluating \'dispatcher.useState\') 但该错误肯定与我的字体导入有关。

import { NavigationContainer, useNavigation } from \'@react-navigation/native\';
import { FontAwesome } from \'@expo/vector-icons\';
import { MaterialCommunityIcons } from \'@expo/vector-icons\';
import {createStackNavigator} from \'@react-navigation/stack\';
import { AuthContext } from \"./context\";
import BottomTabNavigator from \"./navigation/tabsNav\";
import * as firebase from \"firebase\";
import Myapp from \'./instanceFirebase\';
import AuthStackScreen from \'./navigation/authStack\';
import { ActivityIndicator } from \'react-native\'
import FlashMessage from \"react-native-flash-message\";


const instanceFirebase = Myapp;


import \"firebase/functions\";
import \"firebase/firestore\";
import * as Font from \'expo-font\';
console.log(\"font\", Font)


const [fontState, setFontState] = React.useState(false);



const MainStack = createStackNavigator();
const MainStackScreen = () => {
  return(
    
    <MainStack.Navigator initialRouteName=\"mainPage\" >
        <MainStack.Screen 
          name=\"mainPage\"
          component={BottomTabNavigator} />
    </MainStack.Navigator>   
  )
}

const RootStack = createStackNavigator();
const RootStackScreen = ({ userToken }) => (
  <RootStack.Navigator headerMode=\"none\">
    {userToken ? (
      <RootStack.Screen
        name=\"App\"
        component={MainStackScreen}
      />
    ) : (
      <RootStack.Screen
        headerMode=\"none\"
        name=\"Authstack\"
        component={AuthStackScreen}
        options={{
          animationEnabled: false
        }}
      />
    )}
  </RootStack.Navigator>
);




export default function token() {
  const [userToken, setUserToken] = React.useState(null);
  const Context = {
    instanceFirebase: instanceFirebase,
    signOut: () => {
      setUserToken(null);
    },
    signIn:() => {
      setUserToken(true);
    }
  }
  
  React.useEffect(() => {
    const fetchFont = async () => {
      await Font.loadAsync({
        Jost: require(\'./assets/fonts/Jost-Regular.ttf\'),
        Jost_black: require(\'./assets/fonts/Jost-Black.ttf\')
      })
      setFontState(true)
    }
    fetchFont()


    firebase.auth().onAuthStateChanged(user => {
      if(user){
        setUserToken(true)
      } else {
        setUserToken(null)
      }
    })

  }, [])
 
  if (!fontState) {
    return <ActivityIndicator />
  } else {
  return (
    <AuthContext.Provider value={instanceFirebase}>
        <NavigationContainer>
          <RootStackScreen userToken={userToken} />
            <FlashMessage position=\"top\" style={{zIndex:99, flex:1, marginTop:30}}/>
        </NavigationContainer>
        </AuthContext.Provider>
  )
 }
}

我检查了 expo-font 是否可以很好地导入，这很好。我不明白发生了什么，当我评论与字体导入相关的代码时，我的应用程序正常工作。所以我的错误肯定与字体导入有关。我做事正确吗？感谢您的帮助

您不应该在功能组件之外使用 useState 挂钩。 const [fontState, setFontState] = React.useState(false);

标签： react-native fonts expo

【解决方案1】：

Med El Mobarik 的正确答案：事实上，我不应该在功能组件之外使用 useState const [fontState, setFontState] = React.useState(false);

尽管如此，有没有办法在根页面中加载字体（在应用程序的开头/我的应用程序实例正在启动的位置）？我想避免在每一页上加载字体。

【讨论】：