앱이 모든 곳에서 동일한 글꼴을 사용하도록 React Native에이 CSS와 동등한 것이 있습니까?
body {
font-family: 'Open Sans';
}
모든 텍스트 노드에 수동으로 적용하는 것은 지나치게 복잡해 보입니다.
답변
권장되는 방법은 MyAppText와 같은 고유 한 구성 요소를 만드는 것입니다. MyAppText는 범용 스타일을 사용하여 텍스트 구성 요소를 렌더링하고 다른 소품 등을 통과 할 수있는 간단한 구성 요소입니다.
https://facebook.github.io/react-native/docs/text.html#limited-style-inheritance
답변
최근에이 문제를 해결하기 위해 만들어진 노드 모듈이 있으므로 다른 구성 요소 를 만들 필요가 없습니다 .
https://github.com/Ajackster/react-native-global-props
https://www.npmjs.com/package/react-native-global-props
문서에는 최상위 구성 요소에서 setCustomText이와 같이 함수를 가져 오는 것으로 나와 있습니다.
import { setCustomText } from 'react-native-global-props';
그런 다음 반응 네이티브 Text구성 요소에 대해 원하는 사용자 지정 스타일 / 소품을 만듭니다 . 귀하의 경우 fontFamily 가 모든 Text구성 요소 에서 작동하기 를 원합니다 .
const customTextProps = {
style: {
fontFamily: yourFont
}
}
setCustomText함수를 호출하고 소품 / 스타일을 함수에 전달합니다.
setCustomText(customTextProps);
그런 다음 모든 반응 네이티브 Text구성 요소에는 사용자가 제공하는 다른 소품 / 스타일과 함께 선언 된 fontFamily 가 있습니다 .
답변
React Native 0.56.0+의 경우 defaultProps가 먼저 정의되었는지 확인하십시오.
Text.defaultProps = Text.defaultProps || {}
그런 다음 다음을 추가하십시오.
Text.defaultProps.style = { fontFamily: 'some_font' }
App.js 파일 (또는 가지고있는 루트 구성 요소)의 생성자에 위를 추가합니다.
스타일을 무시하기 위해 당신은 (예를 들어 스타일 객체를 생성하고 다음 추가 스타일을 추가 확산 될 수 있습니다 { ...baseStyle, fontSize: 16 })
답변
Text를 사용하여 구성 요소에 다음을 추가하여 Text 동작을 재정의 할 수 있습니다.
let oldRender = Text.prototype.render;
Text.prototype.render = function (...args) {
let origin = oldRender.call(this, ...args);
return React.cloneElement(origin, {
style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
});
};
편집 : React Native 0.56 이후로 Text.prototype더 이상 작동하지 않습니다. 다음을 제거해야합니다 .prototype.
let oldRender = Text.render;
Text.render = function (...args) {
let origin = oldRender.call(this, ...args);
return React.cloneElement(origin, {
style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
});
};
답변
React-Native 0.56에서는 위의 변경 방법이 Text.prototype.render더 이상 작동하지 않으므로 자신의 구성 요소를 사용해야하며 한 줄로 수행 할 수 있습니다!
MyText.js
export default props => <Text {...props} style={[{fontFamily: 'Helvetica'}, props.style]}>{props.children}</Text>
AnotherComponent.js
import Text from './MyText';
...
<Text>This will show in default font.</Text>
...
답변
이 함수를 루트 App구성 요소에 추가 한 다음이 지침에 따라 글꼴을 추가 한 후 생성자에서 실행합니다. https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e
import {Text, TextInput} from 'react-native'
SetDefaultFontFamily = () => {
let components = [Text, TextInput]
const customProps = {
style: {
fontFamily: "Rubik"
}
}
for(let i = 0; i < components.length; i++) {
const TextRender = components[i].prototype.render;
const initialDefaultProps = components[i].prototype.constructor.defaultProps;
components[i].prototype.constructor.defaultProps = {
...initialDefaultProps,
...customProps,
}
components[i].prototype.render = function render() {
let oldProps = this.props;
this.props = { ...this.props, style: [customProps.style, this.props.style] };
try {
return TextRender.apply(this, arguments);
} finally {
this.props = oldProps;
}
};
}
}
답변
이 스레드에 매우 늦었지만 여기에 있습니다.
TLDR; 다음 블록을 추가하십시오.AppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
....
// HERE: replace "Verlag" with your font
[[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]];
....
}
전체 흐름의 연습.
플러그인을 사용하지 react-native-global-props않고이 작업을 수행 할 수있는 몇 가지 방법이 있으므로 단계별로 안내해 드리겠습니다.
플랫폼에 글꼴 추가.
IOS 프로젝트에 글꼴을 추가하는 방법
먼저 자산의 위치를 생성하겠습니다. 루트에 다음 디렉토리를 만드십시오.
“`
ios/
static/
fonts/
“`
이제 package.json에 “React Native”NPM을 추가하겠습니다.
"rnpm": {
"static": [
"./static/fonts/"
]
}
이제 “반응 네이티브 링크”를 실행하여 네이티브 앱에 자산을 추가 할 수 있습니다.
수동으로 확인하거나 수행합니다.
프로젝트에 글꼴 이름을 추가해야합니다 .plist
(VS 코드 사용자 code ios/*/Info.plist가 확인을 위해 실행 하는 경우).
여기에 Verlag추가 한 글꼴이 다음과 같아야 한다고 가정 합니다.
<dict>
<plist>
.....
<key>UIAppFonts</key>
<array>
<string>Verlag Bold Italic.otf</string>
<string>Verlag Book Italic.otf</string>
<string>Verlag Light.otf</string>
<string>Verlag XLight Italic.otf</string>
<string>Verlag XLight.otf</string>
<string>Verlag-Black.otf</string>
<string>Verlag-BlackItalic.otf</string>
<string>Verlag-Bold.otf</string>
<string>Verlag-Book.otf</string>
<string>Verlag-LightItalic.otf</string>
</array>
....
</dict>
</plist>
이제 매핑 했으므로 이제 실제로 거기에 있고로드되고 있는지 확인합니다 (이것은 수동으로 수행하는 방법이기도합니다).
으로 이동하여 "Build Phase" > "Copy Bundler Resource"작동하지 않으면 여기에 수동으로 추가합니다.
글꼴 이름 가져 오기 (XCode에서 인식)
먼저 다음과 같이 XCode 로그를 엽니 다.
그런 다음 다음 블록을 추가 AppDelegate.m하여 글꼴 및 글꼴 패밀리의 이름을 기록 할 수 있습니다 .
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
.....
for (NSString* family in [UIFont familyNames])
{
NSLog(@"%@", family);
for (NSString* name in [UIFont fontNamesForFamilyName: family])
{
NSLog(@" %@", name);
}
}
...
}
실행하면 올바르게로드 된 글꼴을 찾을 수 있습니다. 여기에서 다음과 같은 로그에서 글꼴을 찾았습니다.
2018-05-07 10:57:04.194127-0700 MyApp[84024:1486266] Verlag
2018-05-07 10:57:04.194266-0700 MyApp[84024:1486266] Verlag-Book
2018-05-07 10:57:04.194401-0700 MyApp[84024:1486266] Verlag-BlackItalic
2018-05-07 10:57:04.194516-0700 MyApp[84024:1486266] Verlag-BoldItalic
2018-05-07 10:57:04.194616-0700 MyApp[84024:1486266] Verlag-XLight
2018-05-07 10:57:04.194737-0700 MyApp[84024:1486266] Verlag-Bold
2018-05-07 10:57:04.194833-0700 MyApp[84024:1486266] Verlag-Black
2018-05-07 10:57:04.194942-0700 MyApp[84024:1486266] Verlag-XLightItalic
2018-05-07 10:57:04.195170-0700 MyApp[84024:1486266] Verlag-LightItalic
2018-05-07 10:57:04.195327-0700 MyApp[84024:1486266] Verlag-BookItalic
2018-05-07 10:57:04.195510-0700 MyApp[84024:1486266] Verlag-Light
이제 우리는 그것이 Verlag패밀리를 로드했고 그 패밀리 내의 글꼴 이라는 것을 알고 있습니다.
Verlag-BookVerlag-BlackItalicVerlag-BoldItalicVerlag-XLightVerlag-BoldVerlag-BlackVerlag-XLightItalicVerlag-LightItalicVerlag-BookItalicVerlag-Light
이제 React Native 앱에서 사용할 수있는 글꼴 패밀리에서 사용할 수있는 대소 문자 구분 이름입니다.
이제 기본 글꼴을 설정했습니다.
그런 다음 AppDelegate.m이 줄 에 글꼴 패밀리 이름을 추가 할 기본 글꼴을 설정하려면
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
....
// ADD THIS LINE (replace "Verlag" with your font)
[[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]];
....
}
끝난.
