React Native에서 텍스트 색상 설정

Shiv Yadav 2023년10월12일 React React Text
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 구성 요소에서 색상을 변경할 수 있습니다.

튜토리얼이 마음에 드시나요? DelftStack을 구독하세요 YouTube에서 저희가 더 많은 고품질 비디오 가이드를 제작할 수 있도록 지원해주세요. 구독하다
작가: 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