ReactNative渐变组件 react-native-linear-gradient

react-native-linear-gradient 是一个用于 React Native 应用程序的自定义组件，它允许你创建一个线性渐变背景。

首先，你需要安装这个库：

npm install react-native-linear-gradient

或者如果你使用 yarn：

yarn add react-native-linear-gradient

然后你可以在你的代码中这样使用它：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
 
const MyComponent = () => (
  <LinearGradient
    style={styles.gradientContainer}
    colors={['#ffcc00', '#ff0066']}
    start={{ x: 0, y: 0.5 }}
    end={{ x: 1, y: 0.5 }}
  >
    <Text style={styles.text}>Hello, Linear Gradient!</Text>
  </LinearGradient>
);
 
const styles = StyleSheet.create({
  gradientContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold'
  }
});
 
export default MyComponent;

在这个例子中，LinearGradient 组件被用作一个容器，它有两种颜色的渐变，从左上到右下。它还包含一个 Text 组件，该组件在渐变背景上显示白色文本。