React Nativeでグラデーション?
React Nativeでは純正のStyleSheetモジュールでほとんどのCSSの振る舞いをサポートしていますが、グラデーションだけは再現することができません。
そこで、react-native-linear-gradientというパッケージを使用して、グラデーションを再現します。
インストール
yarn add react-native-linear-gradient
react-native link
注)linkした後によくあるiOSネイティブコードのエラーは以下で解消できます。
rm -rf ios/build && run-ios
サンプルコード
import LinearGradient from 'react-native-linear-gradient';
<LinearGradient
colors={['rgba(249,190,107,1)', 'rgba(255,119,191,1)']}
start={{x: 0.0, y: 1}}
end={{x: 1, y: 1}}>
<Text style={{width: '100%', textAlign: 'center', padding: 10, color: '#fff'}}>グラデーション</Text>
</LinearGradient>
LinearGradientはViewを継承しています。なので、デフォルトのスタイルはViewと同じです。
各種propsの解説
colors props
例: colors={['#4c669f', '#3b5998', '#192f6a']}
配列で指定します。色を設定できます。
start/end props
オブジェクトで指定します。グラデーションの開始位置と終了位置を指定できます。
xとyは1.0=100%です。
locations
colorsがそれぞれどのくらいの割合を占めるか、を設定できます。
例えば[0.1, 0.75, 1]の場合、一色目が0~10%、二色目が10%~75%、三色目が75%~100%という割合でグラデーションが描画されます。
まとめ
意外と使い方がわかりにくかったので書きました。もしお役に立てれば幸いです。