react-native渐变色背景

一、下载

npm install react-native-linear-gradient

二、引入并使用

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


const Login= () => {
  return (
    <LinearGradient
      colors={['#FF0000', '#00FF00']} // 渐变颜色数组，可以根据需求调整
      start={{x: 0, y: 0}} // 渐变起点坐标，范围为 (0, 0) 到 (1, 1)
      end={{x: 1, y: 1}} // 渐变终点坐标，范围为 (0, 0) 到 (1, 1)
      style={styles.container} // 样式
    >
      {/* 内容 */}
        ....
    </LinearGradient>
  );
};

注：x属性表示水平向上的位置，其中0为左，1右；y表述垂直方向上的位置，0表示顶部，1表示底部

三、应用

水平渐变（从左到右）：

<LinearGradient
  colors={['#FF0000', '#00FF00']}
  start={{ x: 0, y: 0.5 }}
  end={{ x: 1, y: 0.5 }}
/>

 对角线渐变（从左上到右下）：

<LinearGradient
  colors={['#FF0000', '#00FF00']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 1 }}
/>

 反对角线渐变（从右上到左下）：

<LinearGradient
  colors={['#FF0000', '#00FF00']}
  start={{ x: 1, y: 0 }}
  end={{ x: 0, y: 1 }}
/>