グラデーション(Gradient)

概要

リアクトネイティブ(React Native)にバックグラウンドでグラデーション(Gradient)を入れることは難しいです。このブログではreact-native-linear-gradientを使ってリアクトネイティブ(React Native)プロジェクトにグラデーション(Gradient)背景を入れる方法について説明します。

react-native-linear-gradient公式サイト: https://github.com/react-native-community/react-native-linear-gradient

インストール

リアクトネイティブ(React Native)でグラデーション(Gradient)を使うため下記のコマンドを実行してreact-native-linear-gradientライブラリをインストールします。

npm install --save react-native-linear-gradient

ライブラリ連結

リアクトネイティブ(React Native)でreact-native-linear-gradientを使うため下のコマンドでreact-native-linear-gradientライブラリとリアクトネイティブ(React Native)プロジェクトを連結します。

react-native link react-native-linear-gradient

使い方

リアクトネイティブ(React Native)でreact-native-linear-gradientを使ってグラデーション(Gradient)を実装する方法は下記のようです。 (ソースコードはreact-native-linear-gradient公式サイトからコピペ〜しました。)

import LinearGradient from 'react-native-linear-gradient';

// Within your render function
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
  <Text style={styles.buttonText}>
    Sign in with Facebook
  </Text>
</LinearGradient>

// Later on in your styles..
var styles = StyleSheet.create({
  linearGradient: {
    flex: 1,
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5
  },
  buttonText: {
    fontSize: 18,
    fontFamily: 'Gill Sans',
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});

私たちは背景でグラデーション(Gradient)を使うため下のソースコードを使っています。

...
import LinearGradient from 'react-native-linear-gradient';
import styled from 'styled-components/native';
...
const Background = styled(LinearGradient)`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
`;
...
<Background
  colors={[item.background[0], item.background[1]]}
  start={{
    x: item.direction.start.x,
    y: item.direction.start.y,
  }}
  end={{ x: item.direction.end.x, y: item.direction.end.y }}
/>
...