在ReactNative中创建带有渐变边框的按钮

在过去的两个月里，我一直在使用 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 嵌套在一个将扮演渐变边框角色的 View 中。

首先，我们将从 Expo 导入 LinearGradient：

import { LinearGradient } from "expo";

让我们定义渐变开始和结束的位置。根据文档我们可以通过使用 start 和 end 道具来做到这一点。 colors 属性包含代表渐变色标的颜色数组。

然后用 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 组件具有相同的大小。让我们为 View 组件添加一个边距：

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

瞧，我们有一个带有渐变边框的漂亮按钮！ 🌈