自定义字体未应用 React Native Elements Button 组件

Question

无法在反应原生元素中为 Button 设置自定义字体。

我正在使用 "react-native-elements": "^0.19.1" 版本并尝试为按钮设置自定义字体。字体已经在 Text 组件的页面中工作。

<Button
        rightIcon={{ name: 'history', type: 'font-awesome'}}
        transparent={true}
        title='History'
        fontSize={18}
        fontWeight='bold'
        fontFamily='montserrat'
      />

但是字体没有改变或没有抛出任何错误。我也尝试给 fontFamily “textStyle”、“titleStyle” 道具。没有运气。

字体包含 sn-p,

async componentWillMount() {
try{
  await Expo.Font.loadAsync({
    montserrat: require("./assets/fonts/Montserrat.ttf"),
    montserrat_light: require("./assets/fonts/Montserrat_light.ttf")
  });
  this.setState({ loading: false });
}catch(error){
  console.warn('Error loading fonts', error);
}

}

注意：自定义字体是使用 componentWillMount 方法加载的。

提前致谢。

Answer 1

最后，我找到了解决方案。问题是给按钮的fontWeight。我们必须在 Async 字体加载中定义 Bold 字体并在 fontFamily 中调用名称。

以下脚本将解决我的问题，

<Button
        rightIcon={{ name: 'history', type: 'font-awesome'}}
        transparent={true}
        title='History'
        fontSize={18}
        fontFamily='montserrat_bold'
      />

我们需要在 Async 中定义字体路径，如下所示，

async componentWillMount() {
try{
  await Expo.Font.loadAsync({
    montserrat: require("./assets/fonts/Montserrat.ttf"),
    montserrat_light: require("./assets/fonts/Montserrat_light.ttf"),
    montserrat_bold: require("./assets/fonts/Montserrat-Medium.ttf")
  });
  this.setState({ loading: false });
}catch(error){
  console.warn('Error loading fints', error);
}

}