使用 react-native-linear-gradient 创建复杂渐变

渐变是一种设计技巧，它将多种颜色以平滑的过渡方式混合在一起。例如，想想 Instagram 的标志。当你想要创建多色背景或自定义按钮时，渐变可以派上用场，为你的用户界面增添视觉吸引力，并引导用户的注意力。

在这篇文章中，我们将探索水平、垂直和对角线的线性渐变，学习如何将它们添加到我们的 React Native 应用中。

开始使用 react-native-linear-gradient

在这个教程中，我们将使用 react-native-linear-gradient，这是一个用于在我们的应用程序中添加渐变的库。首先，让我们建立一个新的 React Native 项目：

npx react-native init LinearGradientExample

cd LinearGradientExample
yarn start

在我们的 React Native 应用程序运行时，我们可以添加 react-native-linear-gradient。对于 react-native-linear-gradient 的设置，取决于你正在使用的 React Native 的版本。在这个教程中，我使用的是 v0.6+。如果你正在使用的是 React Native 的旧版本，请查看设置：

yarn add react-native-linear-gradient

为了完成特定于 iOS 的设置，安装 pods：

npx pod-install

线性渐变

导入 LinearGradient 组件：

import LinearGradient from 'react-native-linear-gradient'

LinearGradient 组件接受一些属性(props),这些属性决定了渐变的显示方式,包括颜色、起始位置和结束位置。在我们开始使用这些属性构建复杂的渐变之前,我们应该分解并回顾每个属性。

colors

colors ，是我们传递要显示的颜色的方式，这是必需的。颜色可以以不同的格式传递，如名称，rgba，hex 等。你应该按照你想要显示的顺序排列颜色。例如，使用 colors={["purple","white"]} ，渐变将从紫色变为白色。

start

start 通过向 x 轴和 y 轴传递坐标来指示渐变的开始位置。坐标以整个视图的一部分传递，值的范围在 0 – 1 之间。默认值是 { x: 0.5, y: 0 } ，从顶部中心开始。

end

end 与 start 相似，但它指示渐变结束的位置。它接收的坐标就像 start 一样，正如前面提到的，这是整个视图的一部分。默认值是 { x: 0.5, y: 1 } ，结束于底部中心。

locations

locations 是一个数字数组，定义了每种颜色在渐变中的停止位置。这些值也作为整个渐变的一部分从 0 – 1 传递，并且必须映射相应的颜色在长度和位置上。

例如,假设我们有 colors = {["red","yellow","green"]}。然后,我们将有 locations = {[0, 0.5, 0.6]},第一种颜色 red 覆盖 0 – 0.5,第二种颜色 yellow 从 0.5 – 0.6,最后 green 从 0.6 – 1。

垂直渐变

如前所述,你可以创建不同方向的渐变。让我们先尝试一个垂直渐变,这是 react-native-linear-gradient 的默认设置。渐变从顶部中心开始,一直向下到底部中心。让我们试一试!

首先，清除 App.js 中的所有内容，这样你可以从头开始。添加以下代码：

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'. // import LinearGradient

function App() {
    return (
      <View style={styles.container}>
        <LinearGradient
          colors={['red', 'yellow', 'green' ]}
          style={styles.linearGradient}
        >
          <Text>Vertical Gradient</Text>
        </LinearGradient>
      </View>
    )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  linearGradient: {
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 5,
    height: 200,
    width: 350,
  },
})
export default App

从顶部的导入开始，我们从 React 中导入 React，从 React Native 中导入一些组件，然后添加对 LinearGradient 的导入。

接下来，我们添加一个 View ，并进行样式设计，将所有内容定位在我们将要添加渐变的中心位置。在 LinearGradient 组件中，我们传递 colors ，这是前面提到的必需的属性。我们添加了三种颜色；我们的渐变将从 red 移动到 yellow ，最后是 green 。默认情况下，渐变将从顶部中心移动到底部中心。

重新加载应用，你应该能看到渐变效果

很好，我们的渐变效果如预期显示出来了。为了更好地理解我们之前谈到的属性，让我们稍微调整一下我们当前的渐变效果。

如前所述， start 的默认属性是 start={{ x: 0.5, y: 0 }} ，这意味着渐变将从顶部中心开始。但是，我们所说的顶部中心到底是什么意思呢？

想象整个渐变的宽度，即，x 轴从 0 – 1 开始标定。中心应该是 0.5 ，如下图所示。改变该值应该会移动我们的渐变起始点，从而创建一个对角线渐变。让我们更新我们当前的 LinearGradient ，以添加 start 的值，如下图所示：

...
      <LinearGradient
        colors={['red', 'yellow', 'green' ]}
        style={styles.linearGradient}
        start={{ x: 0.7, y: 0 }}
      >
        <Text>Diagonal Gradient</Text>
      </LinearGradient>
...

如你在上面的截图中所看到的，渐变开始呈对角线，起点在 0.5 和 1 之间的某处向下移动。如果你将值设为 0 或 1 ，对角线渐变将从相应的角落，右或左开始。

调整 y 轴的值将决定渐变的开始位置。渐变前的空间将被第一种颜色覆盖。将属性更新为 start={{ x: 0.5, y: 0.5}} 将使渐变从我们视图的中心开始，顶部一半被红色覆盖：

水平渐变

既然我们已经理解了如何在 x 轴和 y 轴上更新我们的起始点，那么让我们将这个知识与 end 属性结合起来，创建水平渐变。

如我们之前讨论的， end 决定了我们的渐变将在哪里结束。对于一个水平渐变，理想情况下，我们希望它从左中心开始，到右中心结束。让我们试试看：

...
      <LinearGradient
        colors={['red', 'yellow', 'green' ]}
        style={styles.linearGradient}
        start={{ x: 0, y: 0.5 }}
        end={{ x: 1, y: 0.5 }}
      >
        <Text>Horizontal Gradient</Text>
      </LinearGradient>
...

如你所见，y 轴从开始到结束都保持不变，而 x 轴则从 0 – 1 移动，从而形成以下的梯度：

我们可以进一步调整这个来创建一个接近水平对齐的对角渐变。更新 start={{ x: 0, y: 0 }} 和 end={{ x: 1, y: 1 }} 应该能创建出这样的渐变：

locations

在使用了大多数其他属性后,我们只剩下尚未利用的 locations 属性。快速回顾一下, locations 决定了颜色在渐变中的停止位置,并与对应的 color 值相映射。

locations 主要用于当你希望一种或多种颜色在渐变视图中相比其他颜色覆盖更多空间时。范围较大的颜色将覆盖更多空间:

...
      <LinearGradient
        colors={['red', 'yellow', 'green' ]}
        style={styles.linearGradient}
        start={{ x: 0, y: 0.5 }}
        end={{ x: 1, y: 0.5 }}
        locations={[0, 0.7, 0.9]}
      >
        <Text>H. Location Gradient</Text>
      </LinearGradient>
      <LinearGradient
        colors={['red', 'yellow', 'green' ]}
        style={styles.linearGradient}
        locations={[0, 0.3, 0.9]}
      >
        <Text>V. Location Gradient</Text>
      </LinearGradient>
...

看看实际操作：

意调整颜色，更改它们，添加更多，并调整 start ， end 和 locations 的值，看看它们的表现。

事例

在这个部分，我们将回顾一下上述 LinearGradients 的几个使用案例：

• 全屏多色背景
• 带渐变背景的按钮
• 带渐变边框的按钮

对于这些示例，让我们从头开始！创建一个名为 Home.js 的新文件，并更新 index.js ，使其指向该文件作为根文件：

// index.js
...
// import App from './App'  // comment this out
import App from './Home'  // add this
...

现在，我们的应用应该渲染主屏幕，所以我们可以在那里进行更新。然后，让我们跳到新的 Home.js 文件，并创建一些东西，例如，全屏的，多色的背景：

// Home.js
import React from 'react'
import { StyleSheet, Text } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
function Home() {
    return (
      <LinearGradient
        colors={['purple', 'white']}
        style={styles.container}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
      >
        <Text>Home Screen</Text>
      </LinearGradient>
    )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
})
export default Home

你可以选择是否使用 start 和 end 属性来创建垂直或对角线背景：

最后，对于我们的两个按钮，让我们跳回到主屏幕文本下方的 Home.js ，并添加两个按钮。我为两者都使用了水平背景。第一个，渐变背景，试图模仿 Instagram 的配色方案，而另一个则创建了一个边框渐变效果：

// Home.js

...
      <Text>Home Screen</Text>
      <TouchableOpacity onPress={() => {}}>
        <LinearGradient
          start={{ x: 0, y: 0 }}
          end={{x: 1, y: 1 }}
          colors={['#5851DB', '#C13584', '#E1306C', '#FD1D1D', '#F77737']}
          style={styles.instagramButton}
          >
          <Text style={{ color: 'white' }}>
            Sign In With Instagram
          </Text>
        </LinearGradient>
      </TouchableOpacity>
      <LinearGradient
        start={{ x: 0, y: 0 }}
        end={{x: 1, y: 1 }}
        colors={[ 'red', 'yellow', 'green' ]}
        style={{
          alignItems: 'center',
          justifyContent: 'center',
          borderRadius: 10,
        }}
      >
        <TouchableOpacity
          onPress={() => {}}
          style={styles.signUpButton}
        >
          <Text>Sign Up</Text>
        </TouchableOpacity>
      </LinearGradient>

...

// styles
  instagramButton: {
    paddingHorizontal: 40,
    paddingVertical: 10,
    borderRadius: 10,
    margin: 20
  },
  signUpButton: {
    margin: 1,
    width: 200,
    borderRadius: 10,
    paddingVertical: 10,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },

上述代码应该给我们一个最终输出，如下所示：

总结

一如既往,熟能生巧,所以不断尝试不同的属性,直到你掌握为止。提一句忠告,在颜色方面,尽量不要过度使用。在屏幕上使用过多的颜色可能会对用户界面和体验产生不利影响。

总结

在这篇文章中，我们研究了如何在 React Native 项目中实现下拉刷新和滚动刷新，以及如何将这些功能结合起来。我们还讨论了如何定制刷新控制组件。

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。