在 React Native 中创建带渐变边框的按钮

在过去的两个月里,我一直在与React Native合作,在这个简短的教程中,我将向您展示如何创建一个具有梯度边界的按钮,就像这个:

要做到这一点,我们将使用 Expo的 LinearGradient组件)。

开始的

首先,让我们开始创建一个自定义按钮组件:

1<TouchableOpacity onPress={() => {})}>
2  <View style={styles.circleGradient}>
3    <Text style={styles.visit}>Login</Text>
4  </View>  
5</TouchableOpacity>

让我们定义风格,如下,为圆角:

 1circleGradient: {
 2  backgroundColor: "white",
 3  borderRadius: 5
 4},
 5visit: {
 6  margin: 4,
 7  paddingHorizontal: 6,
 8  textAlign: "center",
 9  backgroundColor: "white",
10  color: '#008f68',
11  fontSize: 12
12}

添加一个格拉迪因边界

React Native 不会在盒子外支持梯度边界,所以我们将在视图中嵌入我们的视图,该视图将扮演梯度边界的角色。

首先,我们将从Expo导入LinearGradient:

1import { LinearGradient } from "expo";

根据文档我们可以通过使用开始和结束插件来实现这一点。

然后用 LinearGradient 包装我们的视图:

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

请注意,我们将 borderRadius 风格应用于 LinearGradient 的值与我们的 View 相同。

这是因为我们的View和LinearGradient组件大小相同,让我们为我们的View组件添加一个边缘:

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

还有,我们有一个漂亮的按钮与梯度边界!