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

Posted 2023-03-14

【中文标题】如何将 expo react-native 自定义字体应用于整个容器

【英文标题】：How to apply expo react-native custom font to the entire container

【发布时间】：2020-02-14 14:32:16

【问题描述】：

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

目前我使用的是官方的 expo 文档：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>

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

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

这是我的代码：

    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>
        );
    

【问题讨论】：

只能这样：***.com/questions/36608954/…

【参考方案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>

【参考方案2】：

文档说无法在整个应用程序中设置字体。

在您的应用程序中使用一致的字体和大小的推荐方法是创建一个包含它们的组件 MyAppText 并在您的应用程序中使用该组件。您还可以使用此组件为其他类型的文本制作更具体的组件，例如 MyAppHeaderText。

更多关于世博会的信息和示例<Text> docs：

https://docs.expo.io/versions/latest/react-native/text/

--

就加载自定义字体文件而言，我建议在通过<AppLoading> 在函数中加载字体时使用SplashScreen.preventAutoHide() 保持启动画面可见。这提供了流畅的加载体验，并确保在最终呈现应用的其余部分时您的字体可用。