React native подключение шрифтов

React native подключение шрифтов

react native expo fonts

Для того чтобы подключить шрифты, вначале скачаем его, например можно скачать с сайта https://fonts.google.com/specimen/Roboto

В папке assets создаем папку fonts, куда и копируем необходимые шрифты. Например Roboto-Bold.ttf и Roboto-Regular.ttf

Устанавливаем пакет для работы со шрифтами:

nom install expo-font

В коде, например в App.js импортируем:

import * as Font from 'expo-font';

И добавляем функцию для асинхронной загрузки шрифтов:

async function loadApplication() {
  await Font.loadAsync({
    'roboto-regular': require('./assets/fonts/Roboto-Regular.ttf'),
    'roboto-bold': require('./assets/fonts/Roboto-Bold.ttf'),
  });
}

Также импортируем AppLoading из Expo

import {AppLoading} from 'expo';

Также в App.js, добавляем примерно такой код:

  const [isReady, setIsReady] = useState(false);

  if (!isReady) {
    return (
      <AppLoading 
        startAsync={loadAppAplication} 
        onError={err => console.log(err)}
        onFinish={() => setIsReady(true)}
      />
    )
  }

Полный файл App.js получится примерно такой:

import React, { useState } from 'react';
import * as Font from 'expo-font';
import {AppLoading} from 'expo';

import { Login } from './src/screens/Login';

async function loadAppAplication() {
  await Font.loadAsync({
    'roboto-regular': require('./assets/fonts/Roboto-Regular.ttf'),
    'roboto-bold': require('./assets/fonts/Roboto-Bold.ttf'),
  });
}

export default function App() {
  const [isReady, setIsReady] = useState(false);

  if (!isReady) {
    return (
      <AppLoading 
        startAsync={loadAppAplication} 
        onError={err => console.log(err)}
        onFinish={() => setIsReady(true)}
      />
    )
  }

  return (
    <Login />
  );
}

Теперь для текста можно указывать свойство RobotoFamily

Дальше лучше всего создать свои компоненты например: AppText и AppTextBold, и использовать их вместо Text, тогда при необходимости сменить шрифт его можно будет поменять в одном месте.

У меня структура проекта на текущий момент:

assets
  fonts
    Roboto-Bold.ttf
    Roboto-Regular.ttf
  icon.png
  logo.png
  splash.png
src
  components
    ui
      AppText.js
      AppTextBold.js
  screens
    Login.js
  theme.js
App.js

Файл AppText.js:

import React from 'react';
import {Text, StyleSheet} from 'react-native';

export const AppText = props => (
    <Text style={{...styles.default, ...props.style}}>{props.children}</Text>
)

const styles = StyleSheet.create({
    default: {
        fontFamily: 'roboto-regular',
    }
})

Файл AppTextBold.js:

import React from 'react';
import {Text, StyleSheet} from 'react-native';

export const AppTextBold = props => (
    <Text style={{...styles.default, ...props.style}}>{props.children}</Text>
)

const styles = StyleSheet.create({
    default: {
        fontFamily: 'roboto-bold',
    }
})

Файл theme.js:

export const THEME = {
    MAIN_COLOR: 'indigo',
}

Файл Login.js:

import React, { useState } from 'react';
import {View, StyleSheet, TextInput, Button, Alert, Image} from 'react-native';
import {THEME} from '../theme';
import {AppTextBold} from '../components/ui/AppTextBold';


export const Login = (props) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const pressLogin = () => {
        if (email.trim()) {
            setEmail('');
        } else {
            Alert.alert('Не заполнен email!');
        }      
    }

    return (
        <View style={styles.block}>
            <View style={styles.img}>
                <Image source={require('../../assets/logo.png')} />
            </View>
            <View style={styles.block1}>
                <AppTextBold style={styles.text}>
                    Добро пожаловать!
                </AppTextBold>
                <TextInput 
                    style={styles.input}
                    onChangeText={setEmail}
                    value={email}
                    placeholder="Введите Email"
                    autoCorrect={false}
                    autoCapitalize='none'
                    keyboardType='email-address'
                />
                <TextInput 
                    style={styles.input}
                    onChangeText={setPassword}
                    value={password}
                    placeholder="Введите пароль"
                    autoCorrect={false}
                    autoCapitalize='none'
                />
            </View>

            
            <View style={styles.blockButton}>
                <View style={styles.button}>
                    <Button title="Забыли пароль?" />
                </View>
                <View style={styles.button}>
                    <Button style={styles.button} title="Зарегистрироваться" />
                </View>
                
            </View>
            <Button title="Войти" onPress={pressLogin}/>
        </View>
    )
}

const styles = StyleSheet.create({
    block: {
        flex: 1,
        backgroundColor: '#fff',
        justifyContent: 'center',
    },
    block1: {
        alignItems: 'center',
    },
    blockButton: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingBottom: 15,
    },
    img: {
        alignItems: 'center',
    },
    button: {
        width: '47%',
    },
    text: {
        fontSize: 26,
        marginBottom: 15,
    }, 
    input: {
        width: '80%',
        borderStyle: 'solid',
        borderWidth: 2,
        borderColor: THEME.MAIN_COLOR,
        borderRadius: 50,
        padding: 10,
        marginBottom: 15,
    }
})

Оставить комментарий