ReactNativeでグラデーションの境界線を持つボタンを作成する

getdocs

2年前

過去2か月間、私はReact Nativeを使用してきました。この短いチュートリアルでは、次のようなグラデーションの境界線を持つボタンを作成する方法を示します。

そのために、ExpoのLinearGradientコンポーネントを使用します。 Expoに慣れていない場合は、の紹介をお読みください。

入門

まず、カスタムボタンコンポーネントを作成することから始めましょう。

<TouchableOpacity onPress={() => {})}>
  <View style={styles.circleGradient}>
    <Text style={styles.visit}>Login</Text>
  </View>  
</TouchableOpacity>

そして、丸みを帯びた角のスタイルを次のように定義しましょう。

circleGradient: {
  backgroundColor: "white",
  borderRadius: 5
},
visit: {
  margin: 4,
  paddingHorizontal: 6,
  textAlign: "center",
  backgroundColor: "white",
  color: '#008f68',
  fontSize: 12
}

グラデーションの境界線を追加する

React Nativeは、そのままではグラデーションの境界線をサポートしていないため、グラデーションの境界線の役割を果たすビュー内にViewをネストします。

まず、ExpoからLinearGradientをインポートします。

import { LinearGradient } from "expo";

グラデーションの開始位置と終了位置を定義しましょう。ドキュメントによると、startおよびendプロップを使用してこれを行うことができます。 colorsプロップには、グラデーションストップを表す色の配列が含まれています。

次に、ViewをLinearGradientでラップします。

<TouchableOpacity onPress={() => {})}>
  <LinearGradient start={[0, 0.5]}
                  end={[1, 0.5]}
                  colors={['#EFBB35', '#4AAE9B']}
                  style={{borderRadius: 5}}>
    <View style={styles.circleGradient}>
      <Text style={styles.visit}>Login</Text>
    </View>
  </LinearGradient>
</TouchableOpacity>

ビューと同じ値でborderRadiusスタイルをLinearGradientに適用していることに注意してください。これで、境界線が丸いシンプルなボタンができましたが、明らかなグラデーションはありません。

これは、ViewコンポーネントとLinearGradientコンポーネントのサイズが同じであるためです。ビューコンポーネントにマージンを追加しましょう。

circleGradient: {
  margin: 1,
  backgroundColor: "white",
  borderRadius: 5
},

そして、voilà、グラデーションの境界線のある素敵なボタンがあります！ 🌈