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%という割合でグラデーションが描画されます。

まとめ

意外と使い方がわかりにくかったので書きました。もしお役に立てれば幸いです。