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
구성 요소에서 색상을 변경할 수 있습니다.
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