Question

我正在尝试将其与react-navigation一起使用，并且不断得到：

fontFamily'Feather'不是系统字体，尚未加载通过Expo.Font.loadAsync

我在加载组件中使用Font.loadAsync（）方法，但错误不断出现。我实际上最终从我的应用程序中删除了所有矢量图标，以便开始清理。

所以我的问题是我是否有一个以加载屏幕开头的开关导航器（这将启动auth检查），然后切换到包含我的应用程序内容的登录屏幕或根标签容器。我似乎不知道该在哪里调用Font.loadAsync（）

这是我的MainNavigator.js

export default createBottomTabNavigator(
    {
        Friends: FriendsList,
        Profile: Profile,
        Settings: Settings
    },
    {
        defaultNavigationOptions: ({navigation}) => ({
            tabBarIcon: ({tintColor}) => {
                const {routeName} = navigation.state;
                let iconName;
                if (routeName == "Friends") {
                    iconName = "users"
                } else if (routeName == "Profile") {
                    iconName = "user"
                } else if (routeName == "Settings") {
                    iconName = "settings"
                }
                return <Feather name={iconName} size={20} color={tintColor} />
            }
        }),
        tabBarOptions: {
            style: {
                backgroundColor: "#fff"
            }, 
            inactiveTintColor: "#999",
            activeTintColor: TERTIARY_COLOR
        }
    }
)

App.js

// Screens for Switch Navigator
import AuthScreens from "./components/screens/AuthScreens";
import LoadingScreen from "./components/screens/Loading";
import MainNavigator from "./MainNavigator";

const AppContainer =  createAppContainer(createSwitchNavigator(
    {
        LoadingScreen,
        AuthScreens,
        MainNavigator
    },
    {
        initialRouteName: "LoadingScreen"
    }
))

加载屏幕

export default class LoadingScreen extends Component {
    async componentDidMount() {
        try{
            await Font.loadAsync({
                FeatherFont
            })
            firebase.auth().onAuthStateChanged(user => {
                this.props.navigation.navigate(user ? "MainContainer" : "LoginScreen")

            })
        } catch(error) {
            alert(error)
        }

    }
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "center", alignItems: "center"}}>
                <ActivityIndicator/>
            </View>
        )
    }
}

Answer 1

您需要将它们加载到App.js内的_loadResourcesAsync中，而不用Font.loadAsync()

_loadResourcesAsync = async () => {
   // blablabla 
    return Promise.all([
      Asset.loadAsync([
        require('random images'),
      ]),
      Font.loadAsync(
         // this line is where you load the font, name and path
        {Feather: require('./assets/fonts/Feather-path.ttf')},

      ),
    ]);
  };

然后在render函数内部：

render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <View style={styles.container}>
          <StatusBar barStyle="light-content" />
          <AppNavigator style={styles.container} />
          <BarraOffline connected={this.state.isConnected}/>
        </View>
      );
    }
  }

Answer 2

我不知道您对FeatherFont的定义

但我不认为Font将其识别为字体。

Font是处理字体相关任务的模块。

首先，我们必须使用以下方法从资产目录中加载字体： Expo.Font.loadAsync()。
我们可以在componentDidMount()生命周期方法中 App组件。
在App中添加以下方法：
现在我们已将字体文件保存到磁盘，并且将Font SDK 导入，让我们添加以下代码：

我们需要一种在字体加载完成后重新呈现Text组件的方法。

首先我们在App类中将fontLoaded初始化为false 构造函数：

class App extends React.Component {
  state = {
    fontLoaded: false,
  };

  async componentDidMount() {
    await Font.loadAsync({
      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
    });

    this.setState({ fontLoaded: true });
  }
}

使用React Native，您可以使用Text样式属性在fontFamily组件中指定字体。 fontFamily是我们与Font.loadAsync一起使用的密钥。

用法

<Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>
  Hello, world!
</Text>

@ expo / vector-icons，如何使用react-navigation加载字体

2 个答案: