반응형
1. 폰트 다운받아서
2. 프로젝트 asset 으로 폰트를 등록
3. compnents 폴더에 text.jsx 또는 text.tsx 만들어서
import React from 'react';
import {
Text as ReactText,
StyleSheet,
StyleProp,
TextStyle,
} from 'react-native';
type TextProps = {
children: React.ReactNode;
style?: StyleProp<TextStyle>;
};
export const Text = ({style, children}: TextProps) => {
return <ReactText style={[styles.font, style]}>{children}</ReactText>;
};
const styles = StyleSheet.create({
font: {
fontFamily: 'Nunito-Regular',
},
});
사용하는 곳에서는 (App.tsx)
React Text 컴포넌트 대신에 만들어둔 Text 컴포넌트를 이용해서
style 을 props 로 넘겨주면 사용 끝
import React from 'react';
import {SafeAreaView, StyleSheet, StatusBar} from 'react-native';
import {Text} from './components/Text';
const App = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView style={styles.container}>
<Text>This font-weight is 'regular' </Text>
<Text style={styles.boldFont}>This font-weight is 'bold' </Text>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
boldFont: {
fontFamily: 'Nunito-Bold',
},
});
export default App;
나중에
네이버 나눔폰트로 app 에 적용할 때 사용하려고 기록 남겨둡니다
참고사이트
https://blog.logrocket.com/react-native-vector-icons-fonts-react-native-app-ui/
반응형
'IT > React' 카테고리의 다른 글
RN(ReactNative) 개발환경 설정 (0) | 2022.08.08 |
---|---|
RN(ReactNative) libRNVectorIcons.a 에러 날 경우 (iOS App) (0) | 2022.08.08 |
RN(ReactNative) error Parsing error Unexpected token < 수정 (0) | 2022.08.08 |
RN(ReactNative) jsx 파일 사용하기 (0) | 2022.08.08 |
개발시 사용하는 벡터 아이콘 모음 (0) | 2022.08.05 |
React Native 벡터 아이콘 사용하기 vetor-icon (0) | 2022.08.05 |
React 18 에는 enzyme 사용하지 마세요 (0) | 2022.08.01 |
REACT NATIVE UI COMPONENT (0) | 2022.08.01 |