Как применить собственный шрифт expo реагировать на весь контейнер

Как применить собственный шрифт expoact-native для всего контейнера

Я попытался загрузить собственный шрифт для моего приложения «родной», которое я разрабатываю с помощью expo, но я не знаю, как проще загрузить шрифт для всего контейнера экрана.

В настоящее время я использовал официальную выставочную документацию: Expo Custom Font Documentation

Они сказали использовать функцию Font.loadAsync (), а затем использовать this.state.fontLoaded? нравится:

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

но существовало ли решение для применения шрифта к контейнеру, например? Я думаю, что нелегко принудительно окружить КАЖДЫЙ текстовый элемент одной и той же функцией …

В настоящее время шрифт загружается в ОДНОМ текстовом элементе, но я хотел бы иметь возможность легко использовать мой шрифт в контейнере или во многих текстовых элементах одновременно.

Вот мой код:

  state = { fontLoaded: false, }; async componentDidMount() { await Font.loadAsync({ 'ubuntu-medium': require('../assets/fonts/Ubuntu-Medium.ttf'), }); this.setState({ fontLoaded: true }); } render() { return ( {amp}lt;View style={styles.main_container}{amp}gt; {amp}lt;View style={styles.inner_main_container}{amp}gt; {amp}lt;View style={styles.top_links_container}{amp}gt; {amp}lt;View style={styles.profile_and_arrow_container}{amp}gt; {amp}lt;Icon name='arrow-back' color='white' style={styles.icon} /{amp}gt; { this.state.fontLoaded ? ( {amp}lt;Text style={styles.top_links_profile}{amp}gt;Profil{amp}lt;/Text{amp}gt; ) : null } {amp}lt;/View{amp}gt; {amp}lt;View style={styles.profile_edit_container}{amp}gt; {amp}lt;Text style={styles.top_links_edit}{amp}gt;Editer{amp}lt;/Text{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;View style={styles.profile_avatar_container}{amp}gt; {amp}lt;Avatar rounded size='xlarge' source={{ uri: 'https://randomuser.me/api/portraits/men/27.jpg' }}{amp}gt; {amp}lt;/Avatar{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;View style={styles.profile_infos_container}{amp}gt; { this.state.fontLoaded ? ( {amp}lt;Text style={styles.user_name}{amp}gt; Dupont Jean {amp}lt;/Text{amp}gt; ) : null } {amp}lt;Text style={styles.user_title}{amp}gt; CSD - Product Owner {amp}lt;/Text{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;View style={styles.subprofile_infos_container}{amp}gt; {amp}lt;View style={styles.user_experience}{amp}gt; {amp}lt;Text{amp}gt;Experience {amp}lt;/Text{amp}gt; {amp}lt;Text style={styles.user_experience_years}{amp}gt; 7ans{amp}lt;/Text{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;View style={styles.user_grade}{amp}gt; {amp}lt;Text{amp}gt;Grade {amp}lt;/Text{amp}gt; {amp}lt;Text style={styles.user_grade_letter}{amp}gt; D {amp}lt;/Text{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;View numberOfLines={6}{amp}gt; {amp}lt;Text style={styles.user_bio}{amp}gt; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard…{amp}lt;/Text{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;View{amp}gt; {amp}lt;Text style={styles.user_bio_see_more_link}{amp}gt; Voir plus{amp}lt;/Text{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;Divider style={styles.divider} /{amp}gt; {amp}lt;View style={styles.bottom_container}{amp}gt; {amp}lt;View style={styles.bottom_cm_text_info_container}{amp}gt; {amp}lt;Text style={styles.bottom_cm_text_info}{amp}gt;Carrière Manager d'Evelyne{amp}lt;/Text{amp}gt; {amp}lt;Text style={styles.bottom_cm_text_user_name}{amp}gt;Jerôme Durand{amp}lt;/Text{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;View style={styles.bottom_cm_avatar}{amp}gt; {amp}lt;Avatar rounded size='small' source={{ uri: 'https://randomuser.me/api/portraits/men/27.jpg' }} /{amp}gt; {amp}lt;Icon name='right' type='antdesign' color='grey' onPress={() ={amp}gt; console.log('hello button cm view')} /{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;/View{amp}gt; {amp}lt;/View{amp}gt; ); } } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector