安裝

yarn add react-native-linear-gradient

react-native link react-native-linear-gradient

安裝之後執行react-native run-android可能會報錯，比如說我會報一個cannot delete [filename]之類的錯誤，把他說的那幾個檔案刪了，再多run幾次就成功了。

使用

// 引用官網的例子
import LinearGradient from 'react-native-linear-gradient';
// Within your render function
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
  <Text style={styles.buttonText}>
    Sign in with Facebook
  </Text>
</LinearGradient>

// Later on in your styles..
var styles = StyleSheet.create({
  linearGradient: {
    flex: 1,
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5
  },
  buttonText: {
    fontSize: 18,
    fontFamily: 'Gill Sans',
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});

配置

color

陣列。一定要提供給他不少於兩個元素，比如['red','blue']，表示從紅到藍的漸變。

本例用colors={['#295cce', '#14b7e6', '#fff']}

start

物件。可選。格式為{x:number,y:number}。座標從左上角開始，宣告漸變開始的位置，作為漸變整體大小的一部分。示例：{x：0.1，y：0.1}表示梯度將從頂部開始為10％，從左側開始為10％。

end

和start一樣。是指漸變的結束。

舉個例子，比如我們需要從右上角開始到左下角漸變，即對角線漸變，這時就需要設定

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

locations

陣列。可選。定義每個漸變顏色停止的位置，對映到顏色相同的索引顏色。例如：[0.1,0.75,1]表示第一種顏色將佔0％-10％，第二種顏色將佔據10％-75％，最終第三種色彩將佔據75％-100％。

在上例的基礎上，我們想讓白色佔比多一點，讓他佔50%，即從0.5到1這個區間都為白色,深藍色和湖藍色平分漸變這個區間。
locations就可以這樣設定：

locations={[0, 0.25, 0.5]}

相關資料

react-native-linear-gradient 官方文件