ReactNativeでグラデーションの境界線を持つボタンを作成する
過去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à、グラデーションの境界線のある素敵なボタンがあります! 🌈