HOWTO · React
React-Native で境界線の色を設定する
この記事では、react-native でボーダーカラーを使用する方法を紹介します。
このページの内容
この記事では、react-native アプリケーションで境界線の色を設定して使用する方法を説明します。 境界線は、さまざまな境界線の幅と色でカスタマイズできる要素の外側のレイヤーです。
要素の 4つの側面すべてに色を設定することもできます。 反応ネイティブは Text コンポーネントを使用して、アプリケーション内の任意のテキストを表示します。
この記事では、react-native を使用して、テキスト要素の境界線と境界線の色を開発します。 react-native で境界線の色を設定するさまざまな方法が存在します。 同じための最も一般的な方法について説明します。
React-Native で StyleSheet を使用して境界線の色を設定する
StyleSheet は、react-native パッケージからインポートする必要があります。 さまざまな反応ネイティブ要素の スタイル を作成するために使用されます。
これを使用して、カスタム スタイルを作成し、それに応じてアプリケーションに追加できます。
StyleSheet の構文:
const styles = StyleSheet.create({
style1: {
// Put your style here
// For example:
backgroundColor: '#ffffff',
color: '#000000'
},
style2: {
// Put your style here
// For example:
width: '100%',
},
});
反応ネイティブ アプリケーションで StyleSheet を宣言した後、border および border-color プロパティを使用して style を作成し、Text で使用する必要があります。
以下の例では、react-native の StyleSheet を使用して、Text コンポーネントの境界線の色を設定します。 まず、StyleSheet をインポートし、redBorder、blueBorder、および greenBorder という名前の複数の styles を作成しました。
各 style には、borderWidth や borderColor などのスタイルが含まれています。 次に、3つの異なる Text コンポーネントを作成し、作成した style をそれらに配置しました。
最後に、視覚化を向上させるために、パディング と マージン が追加されます。
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.redBorder}>It has red border color</Text>
<Text style={styles.blueBorder}>It has blue border color</Text>
<Text style={styles.greenBorder}>It has green border color</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
redBorder: {
borderWidth: 1,
borderColor: 'red',
padding: 10,
margin: 5
},
blueBorder: {
borderWidth: 1,
borderColor: 'blue',
padding: 10,
margin: 5
},
greenBorder: {
borderWidth: 1,
borderColor: 'green',
padding: 10,
margin: 5
}
});
出力：
上記の出力では、ユーザーは赤、青、緑の 3つの境界線の色を持つ 3つのテキストを見ることができます。
React-Native で style prop を使用して境界線の色を設定する
style prop は、react-native のさまざまな要素に styles を設定するために使用されます。 ユーザーがコンポーネントに適用したい styles を含むオブジェクトを取ります。
たとえば、style prop を使用して境界線の色を指定するには、目的の境界線の色と border-width を含む style prop 値を提供する必要があります。
以下の例では、react-native の Text コンポーネントの style prop を使用して、そのコンポーネントの境界線の色を設定します。 まず、Text コンポーネントを作成する必要があるため、この例では 2つの Text コンポーネントを作成しました。
各コンポーネントは style prop を使用し、style prop では、設定する必要がある borderWidth と borderColor を定義しました。 padding と margin は、コンテンツをよりよく視覚化するために使用されます。
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={{ borderWidth: 2, borderColor: 'yellow', padding: 10, margin: 5 }}>Yellow border color with style prop</Text>
<Text style={{ borderWidth: 2, borderColor: 'purple', padding: 10, margin: 5 }}>Purple border color with style prop</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
出力：
上記の出力では、ユーザーは style prop によって設定された 2つの異なる境界線の色、黄色と紫の 2つのテキストを見ることができます。
この記事では、react-native でさまざまな境界線の色を設定する方法を教えてくれました。 この記事で説明した方法以外にも、境界線の色を設定する方法はたくさんありますが、コンポーネントの境界線に色を付ける最も簡単で一般的な方法は次のとおりです。
