RN（expo）でグラデーション。カード風エリアを作る。

　やりたいこと

• カード風エリアを作りたい
• 背景をグラデーションにしたい
• クリッカブルにしたい

完成品

グラーデーションつけて、ちょっと影落として（難あり）、クリッカブルにする。

準備

グラデーションは標準では難しいらしいので専用のモジュールを利用します。
私はexpoを利用しているのですが、そのまま使えるモジュールがあるようなので、それを利用してみます。

npm install --save expo-linear-gradient

実装

App.js

import React from 'react';
import { View, Button, Text, TouchableHighlight } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default class BlackFade extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', paddingTop: 60 }}>
                <TouchableHighlight
                    onPress={() => console.log("hoge")}
                    underlayColor="#fff"
                    activeOpacity={0.7}
                    style={{
                        shadowColor: "#000",
                        shadowOffset: { width: 1, height: 1 },
                        shadowRadius: 1,
                        shadowOpacity:0.3 //影は無くてもいいかな・・・
                    }}
                >
                    <LinearGradient
                        colors={['#393FFF', '#44A5FF']}
                        start={{ x: 0, y: 0 }}
                        end={{ x: 1, y: 1 }}
                        style={{
                            height: 200,
                            width: 320,
                            borderRadius: 10,
                        }}
                    >
                        <Text
                            style={{
                                color: "#fff",
                                position: "absolute",
                                top: 40,
                                left: 50,
                                fontSize: 20,
                            }}
                        >
                            1234-5678-9012-3456
                        </Text>
                    </LinearGradient>
                </TouchableHighlight>
            </View>
        );
    }
}