Javascript 将自定义字体导入到单独的Styles.js文件

我正在尝试将自定义字体导入特定于样式的Styles.js文件。 字体当前已导入到主App.js文件中，但不知何故，我无法在Styles.js中使用它

我在App.js中使用的代码：

从“React”导入React；
从“react native”导入{View}；
从“/components/Game.js”导入游戏；
从“expo”导入{AppLoading}；
从“expo字体”导入*作为字体；
导出自定义字体={
“headline”：要求（“../assets/fonts/MonotypeCorsivaRegular.ttf”），
};
导出类应用程序扩展React.Component{
状态={
fontsLoaded:错，
};
异步_loadFontsAsync（）{
等待Font.loadAsync（customFonts）；
this.setState（{fontsLoaded:true}）；
}
componentDidMount（）{
这是。_loadFontsAsync（）；
}
render（）{
if（this.state.fontsLoaded）{
返回(
);
}否则{
返回；
}
}
};
导出默认应用程序

我认为问题在于您导入自定义字体的方式和实现App.js的方式

请按以下方式尝试

App.js

import React from "react";
import { View } from "react-native";
import Gamefrom "./components/Game.js";
import { AppLoading } from 'expo';
import * as Font from 'expo-font';


export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fontsLoaded: false,
    };
  }

  async _loadFontsAsync() {
    await Font.loadAsync({
      'headline': require('../assets/fonts/MonotypeCorsivaRegular.ttf'),
    });
    this.setState({ fontsLoaded: true });
  }

  componentDidMount() {
    this._loadFontsAsync();
  }


  render() {
    if (this.state.fontsLoaded) {
      return (
        <View>
          <View>
            <Game/>
          </View>
        </View>
      );
    }
    else {
      return <AppLoading />;
    }
  }
};

从“React”导入React；
从“react native”导入{View}；
从“/components/Game.js”导入游戏；
从“expo”导入{AppLoading}；
从“expo字体”导入*作为字体；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
fontsLoaded:错，
};
}
异步_loadFontsAsync（）{
等待Font.loadAsync({
“headline”：要求（“../assets/fonts/MonotypeCorsivaRegular.ttf”），
});
this.setState（{fontsLoaded:true}）；
}
componentDidMount（）{
这是。_loadFontsAsync（）；
}
render（）{
if（this.state.fontsLoaded）{
返回(
);
}
否则{
返回；
}
}
};

---

Style.js

不需要任何更改。

在app.js中加载所有字体一次，并分别以不同的样式使用。js谢谢，我仍然无法将样式应用于其他组件文件，但我会在找到解决方案后发布