Anonymous
Пользовательский шрифт не работает в React Native
Сообщение
Anonymous » 28 окт 2024, 14:21
Я хочу использовать в своем приложении шрифт из Google Fonts. Вот шрифт.
Я поместил файл .ttf в папку app/fonts.
package.json:
Код: Выделить всё
{
"name": "xxx",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": ["./app/fonts"]
},
"jest": {
"preset": "react-native",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js",
"\\.(css|less)$": "/__mocks__/styleMock.js"
}
},
"dependencies": {
"flow-typed": "^2.0.0",
"immutable": "^3.8.1",
"react": "~15.4.1",
"react-native": "0.42.0",
"react-native-vector-icons": "^4.0.0",
"react-redux": "^5.0.3",
"redux": "^3.6.0",
"redux-immutable": "^4.0.0",
"redux-observable": "^0.14.1",
"rxjs": "^5.2.0"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-jest": "19.0.0",
"babel-preset-react-native": "1.9.1",
"eslint": "^3.17.0",
"eslint-plugin-flowtype": "^2.30.3",
"eslint-plugin-jsx": "^0.0.2",
"eslint-plugin-react": "^6.10.0",
"eslint-plugin-react-native": "^2.3.1",
"flow-bin": "^0.42.0",
"jest": "19.0.2",
"jest-cli": "^19.0.2",
"react-test-renderer": "~15.4.1",
"redux-devtools": "^3.3.2",
"remote-redux-devtools": "^0.5.7"
}
}
затем запустил реактивную ссылку.
Затем используйте шрифт в моем приложении:< /p>
Код: Выделить всё
import { View, Text } from 'react-native'
import React from 'react'
import Width from '../width/Width'
import Shape from '../shape/Shape'
import Height from '../height/Height'
import Thickness from '../thickness/Thickness'
export const Volcalc = () => (
SHAPE
HEIGHT
WIDTH
THICKNESS
)
const $mainColor = '#00d1b2'
const styles = {
container: {
flex: 1,
padding: 20,
backgroundColor: $mainColor
},
text: {
textAlign: 'center',
color: 'rgba(255, 255, 255, 0.9)',
fontSize: 15,
fontFamily: 'Orbitron'
}
}
В Android новый шрифт не отображается, но ошибок нет. В ios ошибка:
Неопознанное семейство шрифтов "Orbitron"
Что я делаю не так?
Как узнать ТОЧНОЕ значение, которое нужно поместить в fontFamily: 'xxx'?< /п>
Подробнее здесь:
https://stackoverflow.com/questions/430 ... act-native
1730114460
Anonymous
Я хочу использовать в своем приложении шрифт из Google Fonts. Вот шрифт. Я поместил файл .ttf в папку app/fonts. package.json: [code]{ "name": "xxx", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "rnpm": { "assets": ["./app/fonts"] }, "jest": { "preset": "react-native", "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js", "\\.(css|less)$": "/__mocks__/styleMock.js" } }, "dependencies": { "flow-typed": "^2.0.0", "immutable": "^3.8.1", "react": "~15.4.1", "react-native": "0.42.0", "react-native-vector-icons": "^4.0.0", "react-redux": "^5.0.3", "redux": "^3.6.0", "redux-immutable": "^4.0.0", "redux-observable": "^0.14.1", "rxjs": "^5.2.0" }, "devDependencies": { "babel-eslint": "^7.1.1", "babel-jest": "19.0.0", "babel-preset-react-native": "1.9.1", "eslint": "^3.17.0", "eslint-plugin-flowtype": "^2.30.3", "eslint-plugin-jsx": "^0.0.2", "eslint-plugin-react": "^6.10.0", "eslint-plugin-react-native": "^2.3.1", "flow-bin": "^0.42.0", "jest": "19.0.2", "jest-cli": "^19.0.2", "react-test-renderer": "~15.4.1", "redux-devtools": "^3.3.2", "remote-redux-devtools": "^0.5.7" } } [/code] затем запустил реактивную ссылку. Затем используйте шрифт в моем приложении:< /p> [code]import { View, Text } from 'react-native' import React from 'react' import Width from '../width/Width' import Shape from '../shape/Shape' import Height from '../height/Height' import Thickness from '../thickness/Thickness' export const Volcalc = () => ( SHAPE HEIGHT WIDTH THICKNESS ) const $mainColor = '#00d1b2' const styles = { container: { flex: 1, padding: 20, backgroundColor: $mainColor }, text: { textAlign: 'center', color: 'rgba(255, 255, 255, 0.9)', fontSize: 15, fontFamily: 'Orbitron' } } [/code] В Android новый шрифт не отображается, но ошибок нет. В ios ошибка: Неопознанное семейство шрифтов "Orbitron" Что я делаю не так? Как узнать ТОЧНОЕ значение, которое нужно поместить в fontFamily: 'xxx'?< /п> Подробнее здесь: [url]https://stackoverflow.com/questions/43021540/custom-font-not-working-in-react-native[/url]