关键词：
【中文标题】如何将 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() 保持启动画面可见。这提供了流畅的加载体验，并确保在最终呈现应用的其余部分时您的字体可用。
【讨论】：
我们如何将 Firebase Analytics 与基于 expo 的 react-native 应用程序一起使用
】我们如何将FirebaseAnalytics与基于expo的react-native应用程序一起使用【英文标题】：HowcanweuseFirebaseAnalyticswithanexpobasedreact-nativeapp【发布时间】：2018-07-2918:59:09【问题描述】：我正在尝试将FirebaseAnalytics(FA)添加到我的react-native应用... 查看详情
如何使用搜索文本输入（expo、react-native）在屏幕上显示项目
】如何使用搜索文本输入（expo、react-native）在屏幕上显示项目【英文标题】：Howtodisplayitemsonscreenusingsearchtextinput(expo,react-native)【发布时间】：2020-09-2515:14:18【问题描述】：我正在使用reactnative和expo。我在屏幕（iOS）模拟器上有... 查看详情
如何自定义 app.json 以使用 Expo 构建白标应用
】如何自定义app.json以使用Expo构建白标应用【英文标题】：Howtocustomizeapp.jsontobuildawhitelabelappwithExpo【发布时间】：2019-05-1517:32:11【问题描述】：我有一个使用ReactNative和Expo编写的应用程序，我需要创建大约20个几乎相同但具有不... 查看详情
如何使用 expo 实现带有 react-native 的条带？ [关闭]
】如何使用expo实现带有react-native的条带？[关闭]【英文标题】：Howtoimplementstripewithreact-nativeusingexpo?[closed]【发布时间】：2018-06-0801:43:36【问题描述】：我搜索了很多，看到了很多类似的问题，但没有一个符合我的要求。我需要在... 查看详情
如何使用 Expo React-Native 检测抖动事件？
】如何使用ExpoReact-Native检测抖动事件？【英文标题】：HowtodetectshakeeventwithExpoReact-Native?【发布时间】：2019-04-3013:12:11【问题描述】：我想知道是否可以通过Expo检测到抖动事件？【问题讨论】：谷歌给了我这个：libraries.io/npm/react... 查看详情
Expo react-native 将无法连接到 socketio（Android 和 iOS）
】Exporeact-native将无法连接到socketio（Android和iOS）【英文标题】：Exporeact-nativewillnotconnecttosocketio(AndroidandiOS)【发布时间】：2021-08-1001:40:04【问题描述】：我正在尝试使用expo连接到socketio，并为ios（通过expo应用程序隧道连接连接）... 查看详情
React-Native：将焦点设置到由数组构建的自定义组件
】React-Native：将焦点设置到由数组构建的自定义组件【英文标题】：React-Native:Settingfocustocustomcomponentbuiltoffanarray【发布时间】：2019-11-1310:47:39【问题描述】：我正在尝试基于数组创建自定义输入列表，当按下回车键时，我希望焦... 查看详情
expo大作战(十三)--expo如何自定义状态了statebar以及expo中如何处理脱机缓存加载offlinesupport(代码片段)
简要：本系列文章讲会对expo进行全面的介绍，本人从2017年6月份接触expo以来，对expo的研究断断续续，一路走来将近10个月，废话不多说，接下来你看到内容，讲全部来与官网我猜去全部机翻+个人修改补充+demo测试的形式，对expo... 查看详情
如何在 Android 上减小 expo/react-native 应用程序的大小
】如何在Android上减小expo/react-native应用程序的大小【英文标题】：Howtoreducethesizeofanexpo/react-nativeapponAndroid【发布时间】：2018-10-0404:52:18【问题描述】：我正在使用reactnative和expo开发一个小型字典应用程序。因为我正在编译为Apk文... 查看详情
无法将 babel-plugin-module-resolver 与 expo 和 react-native 一起使用
】无法将babel-plugin-module-resolver与expo和react-native一起使用【英文标题】：Unabletousebabel-plugin-module-resolverwithexpoandreact-native【发布时间】：2019-05-0222:06:30【问题描述】：我是Expo和ReactNative的新手。在导入模块时，我在使用绝对路径... 查看详情
从 Expo.MapView React-native 将 fitToSuppiedMarkers 应用到我的地图的正确方法是啥？
】从Expo.MapViewReact-native将fitToSuppiedMarkers应用到我的地图的正确方法是啥？【英文标题】：WhatisthecorrectwaytoapplyfitToSuppliedMarkerstomymapfromExpo.MapViewReact-native?从Expo.MapViewReact-native将fitToSuppiedMarkers应用到我的地图的正确方法是什么？【... 查看详情
为啥 React-Native 无法在与 Expo 的 Android 连接上启动项目？
】为啥React-Native无法在与Expo的Android连接上启动项目？【英文标题】：WhyReact-NativeCouldn\'tstartprojectonAndroidconnectionwithExpo?为什么React-Native无法在与Expo的Android连接上启动项目？【发布时间】：2021-07-1419:58:09【问题描述】：无法在Andr... 查看详情
如何在不启动系统对话框的情况下使用 Expo 在 React-Native 中静默检查相机权限？
】如何在不启动系统对话框的情况下使用Expo在React-Native中静默检查相机权限？【英文标题】：HowcanIsilentlycheckcamerapermissioninReact-NativeusingExpowithoutlaunchingthesystemdialog?【发布时间】：2019-01-0703:00:38【问题描述】：我正在使用Expo构建... 查看详情
如何使用 Expo（React-Native）在 Web 浏览器中呈现 HTML 字符串？
】如何使用Expo（React-Native）在Web浏览器中呈现HTML字符串？【英文标题】：HowtoRenderHTMLstringinWebBrowserwithExpo(React-Native)?【发布时间】：2020-07-1305:47:47【问题描述】：我正在使用react-native-webview-quilljs来呈现格式化的HTML文本。它... 查看详情
如何在 react-native 中为 webView 请求设置自定义标头
】如何在react-native中为webView请求设置自定义标头【英文标题】：HowtosetacustomheaderforwebViewrequestsinreact-native【发布时间】：2016-08-1514:18:07【问题描述】：我希望能够在我的rubyonrails服务器端检测到http请求来自我应用程序中的web... 查看详情
从使用 Expo SDK 构建的 React-Native 应用程序将照片分享到 Instagram
】从使用ExpoSDK构建的React-Native应用程序将照片分享到Instagram【英文标题】：SharephototoInstagramfromReact-NativeappbuiltwithExpoSDK【发布时间】：2017-11-1921:07:37【问题描述】：我希望我的react-native应用与Instagram分享照片。我知道在编写本机... 查看详情
如何在 react-native 的键盘顶部显示自定义视图
】如何在react-native的键盘顶部显示自定义视图【英文标题】：HowtoshowCustomViewonthetopofthekeyboardinreact-native【发布时间】：2019-04-1704:52:57【问题描述】：我正在开发示例应用程序，我需要一个单独的应用程序，该应用程序应放置在单... 查看详情
当我将新项目创建为 react-native 时，Expo XDE for Windows 挂起
】当我将新项目创建为react-native时，ExpoXDEforWindows挂起【英文标题】：ExpoXDEforWindowshangswhenicreateanewprojectasreact-native【发布时间】：2017-07-1803:23:58【问题描述】：晚上11:19:13启动ReactNative打包程序...晚上11:19:21在C:\\data\\TodoList\\tasklis... 查看详情