Как подключить шрифты в react native?

Пользователь

от carlo.cummerata , в категории: JavaScript , год назад

Как подключить шрифты в react native?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

3 ответа

Пользователь

от olen.shanahan , год назад

@carlo.cummerata 

В React Native можно подключить шрифты, используя следующие шаги:

  1. Скачайте шрифты в формате TTF или OTF.
  2. Создайте директорию "assets/fonts" в корневой папке проекта, и сохраните шрифты в этой директории.
  3. Откройте файл "app.js" или "index.js" и добавьте следующий код в начало файла:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { AppLoading } from 'expo';
import { useFonts } from '@use-expo/font';

const [fontsLoaded] = useFonts({
  'font-name': require('./assets/fonts/font-file.ttf'),
});

if (!fontsLoaded) {
  return <AppLoading />;
}


  1. Замените "font-name" на имя шрифта, который вы хотите использовать. И замените "font-file.ttf" на имя файла шрифта.
  2. Теперь вы можете использовать шрифты в своем проекте React Native, используя следующую строку CSS-стиля:
1
font-family: 'font-name';


Пользователь

от elian.swift , год назад

@carlo.cummerata 

В React Native можно подключать шрифты, используя следующие шаги:

  1. Создайте папку fonts в корневой директории вашего проекта, в которой вы будете хранить файлы шрифтов.
  2. Добавьте файлы шрифтов в папку fonts.
  3. Откройте файл react-native.config.js в корневой директории вашего проекта и добавьте следующий код, чтобы выставить путь к шрифтам:
1
2
3
4
5
6
7
8
module.exports = {
  project: {
    android: {
      sourceDir: "./android"
    },
    assets: ["./fonts/"]
  }
};


  1. Откройте файл app.json в корневой директории вашего проекта и добавьте следующий код, чтобы задать имя шрифта:
1
2
3
4
5
6
7
8
9
"expo": {
  "fonts": [
    {
      "name": "your-font-name",
      "family": "your-font-family",
      "src": "./fonts/your-font-file.ttf"
    }
  ]
}


  1. Откройте файл styles.js и используйте имя шрифта, чтобы применить его к тексту:
1
2
3
4
5
6
7
8
9
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  text: {
    fontFamily: 'your-font-name',
  },
});

export default styles;


  1. Запустите при

Пользователь

от maya , год назад

@carlo.cummerata 

В React Native, шрифты можно подключить следующим образом:

  1. Скачайте шрифты и сохраните их в папке assets/fonts вашего проекта.
  2. Откройте файл app.json и добавьте следующие строки в блок expo:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
"android": {
  "useNextNotificationsApi": true,
  "icon": "./assets/icon.png",
  "fonts": [
    {
      "family": "YourFontName",
      "fonts": [
        {
          "asset": "./assets/fonts/YourFontFile.ttf"
        }
      ]
    }
  ]
},


  1. Импортируйте шрифты в вашем компоненте:
1
2
3
4
5
import { useFonts } from 'expo-font';

const [fontsLoaded] = useFonts({
  'YourFontName': require('./assets/fonts/YourFontFile.ttf'),
});


  1. Используйте шрифты в стилях:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import { Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  text: {
    fontFamily: 'YourFontName',
    fontSize: 16,
  },
});

const MyText = () => (
  <Text style={styles.text}>My custom font!</Text>
);


Вы также можете использовать другие методы подключения шрифтов, такие как react-native-vector-icons или @expo/vector-icons.