react-native - 构建为 android 后，自定义字体在真正的 android 设备上不起作用

Question

我在 react-native expo 项目上使用了自定义字体。它在带有 android 模拟器的 expo 平台上运行良好。但是在我将项目构建为 APK 文件后，它并没有将所有文本显示为我的自定义字体。我遵循了这样的教程 (https://docs.expo.io/versions/latest/guides/using-custom-fonts/) 但它不起作用。有什么解决方案可以在 android 上工作吗？

我试过像这样使用自定义字体。

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

  async componentDidMount() {
    await Font.loadAsync({
      "Antonio": require("./assets/fonts/Antonio-Light.ttf"),
      "Antonio-Bold": require("./assets/fonts/Antonio-Bold.ttf")
    });
    this.setState({ fontLoaded: true });
  }

  render() {
    const { fontLoaded } = this.state;
    if (!fontLoaded)
      return (
        <Text>Loading.....</Text>
      );
...........

这是我的 package.json 文件。

...


  "dependencies": {
    "@expo/vector-icons": "^9.0.0",
    "angle-normals": "^1.0.0",
    "art": "^0.10.1",
    "bunny": "^1.0.1",
    "expo": "^34.0.3",
    "expo-asset": "latest",
    "expo-asset-utils": "^1.1.1",
    "expo-font": "^6.0.1",
    "expo-gl": "~5.0.1",
    "expo-pixi": "^1.2.0",
    "expokit": "^32.0.3",
    "gl-mat4": "^1.1.4",
    "gl-react": "^3.13.0",
    "gl-react-expo": "^3.16.3",
    "lodash": "^4.17.11",
    "matter-js": "^0.13.0",
    "native-base": "^2.10.0",
    "prop-types": "^15.6.2",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-motion": "^0.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-animatable": "^1.2.2",
    "react-native-donkey-kong": "^0.5.1",
    "react-native-extended-stylesheet": "git+https://github.com/bberak/react-native-extended-stylesheet.git",
    "react-native-game-engine": "^0.10.1",
    "react-native-gesture-handler": "~1.2.1",
    "react-native-paper": "2.1.3",
    "react-native-responsive-screen": "^1.3.0",
    "react-native-svg": "^9.11.1",
    "react-native-web": "^0.11.2",
    "react-navigation": "^3.2.1",
    "react-navigation-redux-helpers": "^2.0.9",
    "react-redux": "^6.0.0",
    "react-style-proptype": "^3.2.2",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "regl": "^1.3.0"
  },

...

这是我的 app.json 文件。

{
  "expo": {
    "name": "Zenduja",
    "slug": "Zenduja-Pro",
    "privacy": "unlisted",
    "sdkVersion": "33.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "splash": {
      "image": "./assets/images/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#222222"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "assets/fonts/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "package": "com.aaa.aaa"
    },
    "packagerOpts": {
      "assetExts": [
        "ttf",
        "mp4",
        "otf",
        "xml"
      ]
    },
  }
}

请帮帮我。谢谢。

更新问题。

这是我的 expo snack 加载字体项目。

https://snack.expo.io/@angelsinej/font-loading

Answer 1

像这样添加到 app.json 中:

"assetBundlePatterns":["assets/fonts/*"]  

更新到 sdk 34 和相关的 react-native 包。

并重新编译apk