HOWTO · React
React Native에서 텍스트 색상 설정
이 기사는 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에서 스타일을 가져옵니다.
출력:
위 출력에서 색상이 있는 두 문장의 텍스트를 볼 수 있습니다. 변경하려는 경우 StyleSheet 구성 요소에서 색상을 변경할 수 있습니다.
