React Native에서 텍스트 색상 설정

Shiv Yadav 2023년10월12일
React Native에서 텍스트 색상 설정

이 기사에서는 Native React 애플리케이션에서 텍스트 색상을 변경하는 방법을 다룹니다. 이 예제는 React Native에서 텍스트 콘텐츠의 색상을 설정하는 방법을 더 잘 이해할 수 있도록 가능한 한 간단합니다.

React Native에서 텍스트 색상 설정

텍스트 구성 요소에서 텍스트 색상을 설정하려면 색상 속성 또는 CSS 디자인 속성을 활용해야 합니다. React Native 애플리케이션에서 텍스트 색상을 설정하는 방법을 살펴보겠습니다.

import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello and welcome to upwork environment</Text>
      <Text style={styles.text1}>Hello and welcome to upwork environment</Text>
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 24,
    color: "red",
  },
  text1: {
    fontSize: 24,
    color: "blue",
  },
});

위의 프로그램에는 두 개의 텍스트 구성 요소가 있습니다. 각 Text 구성 요소에는 스타일이 있으며 StyleSheet에서 스타일을 가져옵니다.

첫 번째 텍스트 구성 요소는 텍스트 색상이 빨간색텍스트에서 스타일을 가져오는 반면, 두 번째 텍스트 구성 요소는 텍스트 색상이 파란색텍스트1에서 스타일을 가져옵니다.

출력:

React 기본 텍스트 색상

위 출력에서 색상이 있는 두 문장의 텍스트를 볼 수 있습니다. 변경하려는 경우 StyleSheet 구성 요소에서 색상을 변경할 수 있습니다.

작가: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

관련 문장 - React Text