Для того чтобы подключить шрифты, вначале скачаем его, например можно скачать с сайта 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,
}
})