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