はじめに
前回はDatePickerIOS
というiOS用の日付選択コンポーネントをご紹介しました。
今回もiOS用のコンポーネント、MaskedViewIOS
コンポーネントをご紹介します。
MaskedViewIOS
コンポーネントですが、Viewにマスクをかけられるというものです。
マスクについて、また詳細は後ほどご紹介しますが、例えばこのような文字にマスクと呼ばれるフィルタをかけられます。
マスクはデザインツールなどではお馴染みですが、レイヤー(層)を重ね覆うことで、色んな形に背景を切り取ることができます。
今回のケースですと、背景3色を「あいうえお」という文字にあわせてくり抜くことでグラデーションを実現しています。
MaskedViewIOSを使ってみる
では、今回のコードを見ていきます。
コードの解説
では、コードの詳細を見ていきます。
import { MaskedViewIOS, Text, View } from 'react-native';
こちらでMaskedViewIOS
コンポーネントをインポートしています。
<MaskedViewIOS
style={{ flex: 1, flexDirection: 'row', height: '100%' }}
maskElement={
<View style={{
// Transparent background because mask is based off alpha channel.
backgroundColor: 'transparent',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{
fontSize: 60,
color: 'black',
fontWeight: 'bold',
}}>
あいうえお
</Text>
</View>
}
>
<View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} />
<View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} />
<View style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} />
</MaskedViewIOS>
最初の <MaskedViewIOS
からのMaskedViewIOS
コンポーネントを使用しています。
こちらにflexboxのstyleを使用しています。
flexboxについては以前解説した通りです。
maskElement={
<View style={{
backgroundColor: 'transparent',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{
fontSize: 60,
color: 'black',
fontWeight: 'bold',
}}>
あいうえお
</Text>
</View>
}
次にmaskElement
というpropsを設定します。
このpropsではマスクをかける子要素を設定します。
つまり、後ほど指定する背景色からくり抜く要素を指定しています。
<View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} />
<View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} />
<View style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} />
そしてここが背景を設定している箇所です。
この背景を「あいうえお」という文字として切り抜くことでグラデーションを実現しています。
イメージがわかないかもしれませんが、例えばreturn配下をこのように変えてみましょう。
<MaskedViewIOS
style={{ flex: 1, flexDirection: 'row', height: '100%' }}
>
<View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} />
<View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} />
<View style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} />
</MaskedViewIOS>
するとこのように高さ100%で3分割された背景が表示されるはずです。
つまり、これは背景が設定されているもののくり抜く(マスクをかける)対象がない為、そのまま背景が表示されているということです。
まとめ
今回はMaskedViewIOS
コンポーネントの使い方をご紹介しました。
このようにマスクをかけることで、画像化することなくコードだけでグラデーションなどマスクをかけたような画像を作ることができます。
ですが、名前にもあるようにiOSのみで使用できるコンポーネントなのでご注意ください。
投稿者プロフィール
