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

@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';

@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. Запустите при

@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.