HOWTO · React
React Native でテキストの色を設定する
この記事は、React Native でテキストの色を設定するのに役立ちます。
このページの内容
この記事では、Native React アプリケーションでテキストの色を変更する方法について説明します。 この例は、React Native でテキスト コンテンツの色を設定する方法をよりよく理解できるように、できるだけ簡単にします。
React Native でテキストの色を設定する
Text コンポーネントでテキストの色を設定するには、CSS デザインの color 属性またはプロパティを使用する必要があります。 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",
},
});
上記のプログラムには、2つの Text コンポーネントがあります。 各 Text コンポーネントにはスタイルがあり、StyleSheet からスタイルを取得します。
最初の Text コンポーネントは、テキストの色が red の text からスタイルを取得しますが、2 番目の Text コンポーネントは、テキストの色が blue の text1 からスタイルを取得します。
出力：
上記の出力では、テキストの 2つの文がそれぞれの色で表示されています。 色を変更したい場合は、StyleSheet コンポーネントから色を変更できます。
