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

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

安装 link

yarn add  react-native-linear-gradient

react-native link   react-native-linear-gradient

link 之后就可以使用了

 

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

 

 

<LinearGradient colors={['#237af4', '#56b2e3', '#237af4']} style={{flex:1}}></LinearGradient>

默认 是从上往下渐变的：如图

 

如果想从左到右，或者倾斜渐变 就需要加属性了

start:{ x: number, y: number }
end:{ x: number, y: number }

start 就是渐变开始的位置，x、y 范围是 0 - 1 ，
end 同上，就是渐变结束的位置

 

<LinearGradient
            start={{x:1,y:0}}
            end={{x:0,y:1}}
            colors={['#237af4', '#56b2e3', '#237af4']} style={{flex:1}}></LinearGradient>

 

 详细的可以看下面这2个地址

官方文档地址   https://www.jianshu.com/p/757dfeae5162

 

 

分类: react-native

标签: react-native, react-native-linear-gradient