React Native의 글꼴 두께

1. React Native의 글꼴 두께
2. React Native 프로젝트에서 다른 글꼴 사용

이 기사에서는 React Native에서 글꼴 두께가 다른 다양한 글꼴을 사용하는 방법을 배웁니다.

React Native의 글꼴 두께

font-weight 속성은 React Native 애플리케이션에서 몇 가지 문제를 나타낼 수 있으므로 추가 글꼴 파일을 사용하여 React Native 애플리케이션에서 동일한 문제를 복제합니다. React Native에서 사용자 정의 글꼴을 추가하려면 .ttf 파일과 같은 글꼴 파일을 다운로드해야 합니다.

글꼴 파일을 다운로드한 후 React Native 앱에서 사용하려면 특정 단계를 수행해야 합니다.

이 기사 데모에서는 세 가지 변형과 함께 OpenSans 글꼴을 사용하여 OpenSans Regular, OpenSans Bold 및 OpenSans Italic의 다양한 font-weight를 표시합니다.

다른 글꼴 두께에 대해 다른 글꼴을 추가하는 단계는 다음과 같습니다.

React Native 프로젝트에서 다른 글꼴 사용

다른 글꼴 두께에 대해 다른 글꼴을 사용하는 것이 마지막 단계입니다. React Native 프로젝트의 App.js 파일에서 useFonts 후크를 사용하는 코드를 작성합니다.

아래 예제에서는 먼저 React Native 프로젝트에 필요한 구성 요소를 가져왔으며, 이는 React Native 프로젝트의 style을 설정하기 위한 StyleSheet, 콘텐츠 text, View를 작성하기 위한 Text입니다. view 프로젝트를 설정하고 useFonts를 설정하여 fonts를 설정합니다.

useFonts 후크는 앞에서 설명한 방법으로 설정됩니다. 그런 다음 StyleSheet를 사용하여 View 구성 요소에 대한 몇 가지 스타일을 언급했습니다.

마지막으로 Text 구성 요소에서 style 속성을 사용하여 fontFamily 스타일을 설정하고 useFont 후크에서 값을 제공합니다.

import { StyleSheet, Text, View } from 'react-native';
import { useFonts } from 'expo-font';
export default function App(){
    // load fonts
    const [loaded] = useFonts({
        OpenSansRegular: require('./assets/fonts/OpenSans-Regular.ttf'),
        OpenSansBold: require('./assets/fonts/OpenSans-Bold.ttf'),
        OpenSansItalic: require('./assets/fonts/OpenSans-Italic.ttf'),
    });
    if (!loaded) {
        return null;
    }
	// show texts with different fonts
    return (
        <View style={styles.container}>
            <Text style={{ fontFamily: 'OpenSansRegular', fontSize: 30 }}>OpenSans Regular</Text>
            <Text style={{ fontFamily: 'OpenSansBold', fontSize: 30 }}>OpenSans Bold</Text>
            <Text style={{ fontFamily: 'OpenSansItalic', fontSize: 30 }}>OpenSans Italic</Text>
        </View>
    );
}
// style for the component
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

출력:

위의 출력에서 사용자는 동일한 글꼴의 세 가지 글꼴 두께를 볼 수 있습니다.

이 기사에서는 다양한 글꼴 두께에 대해 서로 다른 글꼴을 사용하는 방법을 배웠습니다. 매우 쉽지만 사용자는 단계별 프로세스를 따라야 합니다. 사용자는 예를 따라 프로세스를 더 잘 이해할 수 있습니다.