javascript - 如何将expo react-native自定义字体应用到整个容器

Question

我尝试为我正在使用expo开发的react-native应用程序加载自定义字体，但我不知道如何以更简单的方式为整个屏幕容器加载字体。

目前我使用官方博览会文档:Expo Custom Font Documentation

他们说使用 Font.loadAsync() 函数，然后使用 this.state.fontLoaded? 像这样:

    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  {
    this.state.fontLoaded ? (
      <Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>
        Hello, world!
      </Text>
    ) : null
  }
</View>

但是是否存在在容器上应用字体的解决方案？我认为强制用相同的功能包围每个文本元素并不容易......

目前字体正在一个文本元素上加载，但我希望能够轻松地在容器上或同时在多个文本元素上使用我的字体。

这是我的代码:

    state = {
        fontLoaded: false,
    };

    async componentDidMount() {
        await Font.loadAsync({
            'ubuntu-medium': require('../assets/fonts/Ubuntu-Medium.ttf'),
        });
        this.setState({ fontLoaded: true });
    }
    render() {
        return (
            <View style={styles.main_container}>

                <View style={styles.inner_main_container}>

                    <View style={styles.top_links_container}>
                        <View style={styles.profile_and_arrow_container}>
                            <Icon
                                name='arrow-back'
                                color='white'
                                style={styles.icon} />
                            {
                                this.state.fontLoaded ? (
                                    <Text style={styles.top_links_profile}>Profil</Text>
                                ) : null
                            }
                        </View>
                        <View style={styles.profile_edit_container}>
                            <Text style={styles.top_links_edit}>Editer</Text>
                        </View>
                    </View>
                    <View style={styles.profile_avatar_container}>
                        <Avatar
                            rounded
                            size='xlarge'
                            source={{ uri: 'https://randomuser.me/api/portraits/men/27.jpg' }}>
                        </Avatar>
                    </View>
                    <View style={styles.profile_infos_container}>
                        {
                            this.state.fontLoaded ? (
                                <Text style={styles.user_name}> Dupont Jean </Text>
                            ) : null
                        }
                        <Text style={styles.user_title}> CSD - Product Owner </Text>
                    </View>
                    <View style={styles.subprofile_infos_container}>

                        <View style={styles.user_experience}>
                            <Text>Experience </Text>
                            <Text style={styles.user_experience_years}> 7ans</Text>
                        </View>

                        <View style={styles.user_grade}>
                            <Text>Grade </Text>
                            <Text style={styles.user_grade_letter}> D </Text>
                        </View>
                    </View>
                    <View numberOfLines={6}>
                        <Text style={styles.user_bio}> Lorem Ipsum is simply dummy text of the printing and
                                    typesetting industry. Lorem Ipsum has been the industry's standard…</Text>
                    </View>
                    <View>
                        <Text style={styles.user_bio_see_more_link}> Voir plus</Text>
                    </View>
                    <Divider style={styles.divider} />
                    <View style={styles.bottom_container}>
                        <View style={styles.bottom_cm_text_info_container}>
                            <Text style={styles.bottom_cm_text_info}>Carrière Manager d'Evelyne</Text>
                            <Text style={styles.bottom_cm_text_user_name}>Jerôme Durand</Text>
                        </View>
                        <View style={styles.bottom_cm_avatar}>
                            <Avatar
                                rounded
                                size='small'
                                source={{ uri: 'https://randomuser.me/api/portraits/men/27.jpg' }}
                            />
                            <Icon
                                name='right'
                                type='antdesign'
                                color='grey'
                                onPress={() => console.log('hello button cm view')}
                            />
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

Answer 1

最后我找到了一个很好用的解决方案。

我必须创建一个像这样的自定义组件:

<强>1。例如，创建一个自定义组件 TextCustom.js 并将其放入:

import React from 'react'
import { Text, StyleSheet, View, ActivityIndicator } from 'react-native'
import * as Font from 'expo-font'

export default class TextCustom extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            loading: true,
        }
    }

    async componentWillMount() {
        await Font.loadAsync({
            'Ubuntu': require('./../assets/fonts/Ubuntu-Medium.ttf')
        })
        this.setState({ loading: false })
    }

    render() {
        if (this.state.loading) {
            return <ActivityIndicator/>
        }
            return (
                <View>
                    <Text style={[styles.defaultStyle, this.props.style]}>
                        {this.props.children}
                    </Text>
                </View>
            )
    }
}

const styles = StyleSheet.create({
    defaultStyle: {
        fontFamily: 'Ubuntu'
    },
})

不要忘记从 Expo 导入字体(对于使用 Expo 的人)

<强>2。在您想要使用自定义字体的组件中，只需导入并使用新创建的组件即可:

import TextCustom from './TextCustom'
import TextBoldCustom from './TextBoldCustom'  (if you want to use a Bold or italic font)

并使用它:

<View>
    <TextCustom style={styles.info_welcome}>Bonjour</TextCustom>
</View>