- ボタンやテキストボックスへの影をつけたい
- ボタンやテキストボックスにボーダー(枠)をつけたい
- 文字のフォントを変えたい
- 色を細かく設定したい
というスタイルをカスタマイズしてみたいと言う方向けの記事となっています。
1. 概要
今回は、以下の4つについて解説していきます。
- 影の付け方
- ボーダー(枠)の付け方
- フォントの変え方
- 色を細かく設定する方法
2. 影の付け方
影は、ボタンやテキストボックス、アイコンなど何にでもつけることができます。＜View＞や＜Icon＞のコンポーネントなどのstyleに以下のプロパティを設定します。
使い方
以下のプロパティをスタイルに設定
- shadowColor： 影の色
- shadowOffset： 以下の値を設定
- height： 横の影
- width： 縦の影
- shadowRadius： 影のぼかし度
- shadowOpacity： 影の透明度。0(透過)から1(透過なし)までの値。
実装
結果
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
import React from 'react'; import { StyleSheet, View, Text} from 'react-native'; export default class App extends React.Component { constructor(props) { super(props); this.state = { } } render() { return ( <View style={styles.container}> {/* shadow1 */} <View style={styles.shadow}> <Text style={styles.text}>text</Text> </View> {/* shadow2 */} <View style={styles.shadow2}> <Text style={styles.text}>text</Text> </View> {/* shadow3 */} <View style={styles.shadow3}> <Text style={styles.text}>text</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, marginTop: 100 }, shadow: { alignSelf: "center", backgroundColor: "lightgray", shadowColor: "black", shadowOffset: { height: 6, width: 6 }, shadowRadius: 2, shadowOpacity: 0.8, marginTop: 70 }, shadow2: { alignSelf: "center", backgroundColor: "tomato", shadowColor: "black", shadowOffset: { height: -6, width: -6 }, shadowRadius: 4, shadowOpacity: 0.6, marginTop: 70 }, shadow3: { alignSelf: "center", backgroundColor: "aqua", borderColor: "black", borderWidth: 1, borderRadius: 15, shadowColor: "lightblue", shadowOffset: { height: 10, width: 10 }, shadowRadius: 2, shadowOpacity: 0.9, marginTop: 70 }, text: { fontSize: 24, marginHorizontal: 100, paddingVertical: 20 } }); |
3. ボーダー(枠)の付け方
ボーダーも影の付け方と同様に＜View＞や＜Icon＞のコンポーネントなどのstyleに以下のプロパティを設定します。使い方
以下のプロパティをスタイルに設定
- borderColor： ボーダーの色
- borderWidth： ボーダーの線の太さ
- borderRadius： ボーダーの角の丸み
下だけボーダーを表示させたい時は、borderBottomColor, borderBottomWidthに値を設定すればできます。もちろん、上だけの場合は、borderTopColor, borderTopWidthに値を設定すればできます。
実装
結果
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import React from 'react'; import { StyleSheet, View, Text} from 'react-native'; export default class App extends React.Component { constructor(props) { super(props); this.state = { } } render() { return ( <View style={styles.container}> {/* ボーダー1 */} <View style={styles.border}> <Text style={styles.text}>text</Text> </View> {/* ボーダー2 */} <View style={styles.border2}> <Text style={styles.text}>text</Text> </View> {/* ボーダー3 */} <View style={styles.border3}> <Text style={styles.text}>text</Text> </View> {/* ボーダー4 */} <View style={styles.border4}> <Text style={styles.text}>text</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, marginTop: 100 }, border: { alignSelf: "center", borderColor: "black", borderWidth: 1, marginTop: 30 }, border2: { alignSelf: "center", borderColor: "red", borderWidth: 5, marginTop: 100 }, border3: { alignSelf: "center", borderColor: "black", borderWidth: 5, borderRadius: 15, marginTop: 100 }, border4: { alignSelf: "center", borderBottomColor: "black", borderBottomWidth: 1, borderTopColor: "black", borderTopWidth: 1, marginTop: 100 }, text: { fontSize: 24, marginHorizontal: 100, paddingVertical: 20 } }); |
4. フォントの変え方
フォントは、以下のフォント一覧に記載されているフォントを設定するだけで変更することができます。フォント一覧のサイトのリンクを以下に貼っておきます。
react-native-fonts
使い方
以下のプロパティをスタイルに設定
・fontFamily： “文字のフォントを設定”
設定するフォントは、上記のリンクに記載のあるフォント名を書いてください。(ただし、一部使えない(エラー表示が出る)フォントがありました。)
ちなみに私のお気に入りのフォントは、「Baskerville-Bold」です。デザインが好きです!
実装
結果
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import React from 'react'; import { StyleSheet, View, Text} from 'react-native'; export default class App extends React.Component { constructor(props) { super(props); this.state = { } } render() { return ( <View style={styles.container}> <Text style={styles.text}>normal</Text> <Text style={[styles.text, {fontFamily: "AlNile-Bold"}]}>AlNile-Bold</Text> <Text style={[styles.text, {fontFamily: "Baskerville-Bold"}]}>Baskerville-Bold</Text> <Text style={[styles.text, {fontFamily: "Chalkduster"}]}>Chalkduster</Text> <Text style={[styles.text, {fontFamily: "Farah"}]}>Farah</Text> <Text style={[styles.text, {fontFamily: "GeezaPro-Bold"}]}>GeezaPro-Bold</Text> <Text style={[styles.text, {fontFamily: "HelveticaNeue-BoldItalic"}]}>HelveticaNeue-BoldItalic</Text> <Text style={[styles.text, {fontFamily: "Menlo"}]}>Menlo</Text> <Text style={[styles.text, {fontFamily: "PingFangHK-Ultralight"}]}>PingFangHK-Ultralight</Text> <Text style={[styles.text, {fontFamily: "SavoyeLetPlain"}]}>SavoyeLetPlain</Text> <Text style={[styles.text, {fontFamily: "Trebuchet MS"}]}>Trebuchet MS</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, marginTop: 30 }, text: { alignSelf: "center", fontSize: 30, marginTop: 30 } }); |
5. 色の設定方法
使い方
色の書き方は、以下の4通りあります。
・color: ‘カラーネーム’
・color: ‘#16進数’
・color: ‘RGBAカラーモデル’
・color: ‘ＨＳＬＡカラーモデル’
‘カラーネーム’
シンプルに色設定でき、設定しやすさNo.1ですね。例) ‘white’, ‘red’, ‘gray’, ‘lightblue’など
’16進数’
16進数で書くので、値を細かく設定できますが、値(色)の調整の仕方が分からず、あまり使ったことはないですね…。また、値は３桁か6桁で書くことができます。例) 「#000000(黒)〜#ffffff(白)」か「#000〜#fff」(大文字でも可)
‘RGBAカラーモデル’
RGBAカラーモデルは、背景を透過させることができ、モーダルの背景で使用することがあります。| Red | 赤(0~255の値) |
| Green | 緑(0~255の値) |
| Blue | 青(0~255の値) |
| Alpha | 色の透明度(０（透明）～1（不透明）) |
(color: ‘rgb(0,0,0)’でも可)
‘ＨＳＬＡカラーモデル’
ＨＳＬＡカラーモデルでは、色を細かく設定でき、理想の色が再現できやすいので、おすすめです(^ ^)| Hue | 色相 |
| Saturation | 彩度(0%(不鮮明)〜100%(鮮やか)) |
| Lightness | 明度(0%(黒)〜100%(白)) |
| Alph | 色の透明度(０（透明）～1（不透明）) |
(color: ‘hsl(210, 100%, 60%)’でも可)
