Есть ли способ установить шрифт глобально в реагировать родной? - PullRequest
Новая
       9

Есть ли способ установить шрифт глобально в реагировать родной?

0 голосов
/ 25 июня 2018

Есть ли способ установить шрифт глобально в реагировать родной? что мне нужно сделать, это пользовательский шрифт, который применяет каждый текстовый компонент во всем приложении. Ваша помощь очень ценится, спасибо

Ответы [ 4 ]

0 голосов
/ 25 июня 2018

Итак, я сделал компонент, который делал это довольно легко несколько раз назад.Это работает с Expo, я не знаю, что такое vanilla Reaction-native.

в начале вашего приложения: 

import { Font, Asset } from 'expo'

async initFont() {
    try {
      await Font.loadAsync({
        'Bariol': require('src/assets/font/Bariol_Regular.otf'),
        'Bariol Bold': require('src/assets/font/Bariol_Bold.otf'),
      })
      this.setState({ fontReady: true })
    } catch (e) {
      console.log(e)
    }
  }

Затем необходимо создать файл компонента, например text.js содержащий этот код: 

export default function (props) {
  let font = { fontFamily: 'Bariol' }
  if (props.bold) {
    font = { fontFamily: 'Bariol Bold' }
  }

  const { bold, style, children, ...newProps } = props
  return (
    <Text {...newProps} style={[Style.text, props.style, font]}>
      {props.children}
    </Text>
  )
}

Наконец, в любой другой компонент / страницу просто импортируйте MyText: 

import Text from 'path/to/text.js'

используйте его как обычный Text компонент: 

<Text bold>Hello World!</Text>

Даже если это решение выглядит немного сложнее, чем другие, его легче использовать, когда настройки выполнены, поскольку вам просто нужно импортировать текст.

0 голосов
/ 25 июня 2018

Я думаю, что ваша проблема заключается в добавлении пользовательских шрифтов в реагировать родной.

1.Добавьте свои пользовательские шрифты в ресурсы

Добавьте все файлы шрифтов, которые вы хотите, в папку «assets / fonts» в корне вашего собственного собственного реактивного проекта:

enter image description here

2.Отредактируйте Package.json

Добавление rnpm в package.json, указав путь к файлам шрифтов: 

"rnpm": {
    "assets": [
    "./assets/fonts/"
    ]
},

3.Ссылка на файлы сборки

запустите эту команду в корневой папке вашего собственного реактивного проекта 

react-native link

Это добавит ссылки на шрифты в ваш файл Info.plist для iOS, а на Android скопируйтефайлы шрифтов для android / app / src / main / assets / fonts.

4.Добавить в таблицу стилей

Добавить свойство fontFamily с вашим именем шрифта: 

const styles = StyleSheet.create({
      title: {
        fontSize: 16,
        fontFamily: 'PlayfairDisplay-Bold',
        color: '#fff',
        paddingRight: 20,
      },
    });
0 голосов
/ 25 июня 2018

Один способ создать оболочку для RN ​​Text скажем, MyTextCustomFont. 

const MyTextCustomFont = (props) => {
   return (
        <Text styles={{fontFamily:'myFont'}} {...props} >{props.children}</Text>
   )
}

импортируйте MyTextCustomFont и используйте где угодно.

Другое - определить стиль объекта и импортировать, использовать где угодно

0 голосов
/ 25 июня 2018

да

app.js 

import styles from './styles';
{...}
 <Text style={styles.text}>hello World </Text>
{...}

styles.js 

import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
 text: {
    // define your font or size or whatever you want to style here
  },

используйте стиль для каждого текста, и все изменения будут влиять на все текстовые компоненты

...