react-native 颜色渐变之react-native-l

安装：

npm install react-native-linear-gradient --save-dev
react-native link react-native-linear-gradient  // 自动连接项目

安装之后运行react-native run-android可能会报错，别管多run几次；

例子：

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

class mine extends React.Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }
  render() {
    const bottomColor = `rgba(0, 0, 0, ${0})`
    const maskColor = `rgba(0, 0, 0, ${0.5})`
    return (
      <View style={{ flex: 1, backgroundColor: 'white' }}>
        <LinearGradient colors={[maskColor, bottomColor]} start={{ x: 0, y: 0 }} end={{ x: 0, y: 1 }} locations={[0, 0.75]} style={styles.linearGradient}>
          <Text style={styles.buttonText}>
            Sign in with Facebook
          </Text>
        </LinearGradient>

      </View>
    )
  }
}
const styles = StyleSheet.create({
  linearGradient: {
    height: 64,
    left: 0,
    top: 0,
    width: Dimensions.get('window').width,
  },
  buttonText: {
    fontSize: 18,
    fontFamily: 'Gill Sans',
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
})

module.exports = mine

配置：

color

传数组，一定要提供给他不少于两个元素，比如['red','blue']，表示从红到蓝的渐变。

本例用自定义颜色：

colors={[maskColor, bottomColor]}

start

传对象，可选；格式为{x:number,y:number}。坐标从左上角开始，声明渐变开始的位置，作为渐变整体大小的一部分。示例：{x：0.1，y：0.1}表示梯度将从左侧10％、顶部10％开始。

end

同start，指渐变的结束。

本例用例：

start={{ x: 0, y: 0 }}
end={{ x: 0, y: 1 }}

locations

传数组，可选；定义每个渐变颜色停止的位置，映射到颜色相同的索引颜色。例如：[0.1,0.75,1]表示第一种颜色将占0％-10％，第二种颜色将占据10％-75％，最终第三种色彩将占据75％-100％。

在上例的基础上，我们想让bottomColor占比少一点，让他占25%，即从0.75到1这个区间都为bottomColor,[0,0.75]为渐变区间。
locations就可以这样设置：

locations={[0, 0.75]}

本文参考自：https://www.jianshu.com/p/1412cf0ab3e7

自动连接出问题，尝试手动连接项目，官方文档：https://github.com/react-native-community/react-native-linear-gradient/blob/master/README.md