Question

我正在尝试向我的expo react native应用添加自定义字体，但是我一直没有运气

我正在尝试从Google字体添加一个打开的sans字体ttf文件，该字体位于我在Assets文件夹中的fonts文件夹中，我认为我将它链接起来很好，因为我没有从关于无法解析路径的问题，我也做过本机链接，我觉得我不会通过在线提供的所有必要步骤来添加字体，但由于我是一个真正的菜鸟，我希望我只是缺少明显的东西一个更有经验的开发人员可以指出，这使我发疯，甚至我甚至考虑使用默认字体发布应用程序

import React from 'react';
import { View, Text, TouchableWithoutFeedback } from 'react-native';
import * as Font from 'expo-font';
import { Checkbox, Provider as PaperProvider } from 'react-native-paper';
import EStyleSheet from 'react-native-extended-stylesheet';
import { widthPercentageToDP as wp, heightPercentageToDP as hp }
from 'react-native-responsive-screen';
import NumberInput from './src/components/NumberInput';

export default class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {
      checked: false,
    };
  }

async componentDidMount() {
        await Font.loadAsync({
          OpenSans: require('./assets/fonts/OpenSans-Regular.ttf')
        });

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

     <PaperProvider>
     <View style={styles.container}>
     { this.state.fontLoaded !== true ? (
            <React.Fragment>
<View style={styles.inputs}>
     <View style={styles.inputText}>
     <Text style={styles.inputTextHeader}>1. Sold Price</Text>
     <Text style={styles.fieldDescription}>Sale price not including shipping charge</Text>
     </View>

     </View>
     </View>
</React.Fragment>
    ) : (<Text style={styles.inputText}>Loading... </Text>)
  }
      </View>
      </PaperProvider>
 );
 }
}

const styles = EStyleSheet.create({
inputTextHeader: {
  fontSize: hp('3%'),
  color: '#5D5D5D',
  paddingLeft: wp('4%'),
  fontFamily: 'OpenSans',

}
});

Answer 1

我认为，您应该使用字体功能为应用添加自定义字体通过具有实用功能

    import { Platform } from 'react-native';

    // generate styles for a font with given weight and style
    const fontMaker = (options = {}) => {
    const { weight, family } = Object.assign(
        {
        weight: null,
        family: Platform.OS === 'android' ? 'Roboto' : 'Roboto'
        },
        options
    );

    if (Platform.OS === 'android') {
        const suffix = weight === 'bold' ? 'Bold' : '';
        return {
        fontFamily: family + (suffix.length ? `-${suffix}` : ''),
        marginBottom: -5 // Font margin fixed for Android
        };
    }

    return {
        fontFamily: family,
        fontWeight: weight
    };
    };

    export default fontMaker;

然后使用所需的任何字体作为样式

    import { StyleSheet } from "react-native";

    import fontMaker from "../../utils/fontMaker";

    const styles = StyleSheet.create({
    headerText: {
        ...fontMaker({family: "times roman"}),
        fontSize: 16,
        fontWeight: "normal",
        fontStyle: "normal",
        letterSpacing: 0,
        color: '#fff'
    }
    });

    export default styles;

请按照以下教程添加自定义字体 https://blog.bam.tech/developper-news/add-a-custom-font-to-your-react-native-app

Answer 2

我有点累，所以这可能很愚蠢，但是...如果不可以，您不应该逆转吗？

{ this.state.fontLoaded !== true ? (<Text style={styles.inputText}>Loading... </Text>) : (Actual App Stuff) }

我的字体无法与字体加载异步加载，感觉就像我已经尝试了一切

2 个答案: