文字fontWeight ='bold'取消fontStyle Century Gothic

时间:2018-07-29 09:49:38

标签: react-native

问题:当我在文本上添加属性fontWeight='bold'时,文本样式会更改。没有粗体属性的字体系列可以正常工作。

通过这种方式可以使用字体样式

const styles = StyleSheet.create({
 subHeadingCss: {
    fontSize: 22,
    fontFamily: "century-gothic",
    color: "#3e4152"
  }
});

Century Gothic style work without bold

这样,字体样式不起作用,但字体本身在其他字体家族中变为粗体。

const styles = StyleSheet.create({
 subHeadingCss: {
    fontSize: 22,
    fontWeight: "bold",
    fontFamily: "century-gothic",
    color: "#3e4152"
  }
});

Century Gothic style not work with font weight bold

我如何期望像这样的模型。

mockup

如何在react native中添加字体系列?

import React, { Component } from "react";
import { StyleSheet, Text, View, KeyboardAvoidingView } from "react-native";
import { Font } from "expo";
import AddToCartScreen from "./app/components/AddToCartScreen";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { loading: true };
  }

  async componentWillMount() {
    await Font.loadAsync({
      "century-gothic": require("./app/assets/fonts/CenturyGothic.ttf")
    });
    this.setState({ loading: false });
  }

  render() {
    if (this.state.loading) {
      //first load the text style then to render its necessary
      return (
        <View style={styles.container}>
          <Text
            style={{
              fontSize: 36,
              alignContent: "center",
              alignItems: "center"
            }}
          >
            loading font style ....
          </Text>
        </View> 
      );
    }
    return (
      <View style={styles.container}>
           <AddToCartScreen/>  
      </View>
    );
  }
}

0 个答案:

没有答案