React原生樣式是否支持漸變？

Question

我看到有人爲此做了這樣的工作：https://github.com/brentvatne/react-native-linear-gradient

但是在RN本身支持它嗎？類似於

style = StyleSheet.create({ 
    backgroundGradient: "vertical", 
    backgroundGradientTop: "#333333", 
    backgroundGradientBottom: "#666666" 
}); 

Answer 1

不是現在。你應該使用你鏈接的庫;他們最近添加了Android支持，並且是由react-native的主要貢獻者之一。

Answer 2

尋找一個類似的解決方案我剛剛遇到這個全新的教程，它可以讓您橋接一個Swift漸變背景（https://github.com/soffes/GradientView）庫，同時遍歷每一步獲得一個可用的React組件。

這是一個循序漸進的教程，允許您通過將swift和objective-c組件橋接到可用的React Native組件中來構建自己的組件，該組件可覆蓋標準View組件，並允許您定義漸變像下面這樣：

<LinearGradient 
    style={styles.gradient} 
    locations={[0, 1.0]} 
    colors={['#5ED2A0', '#339CB1']} 
/> 

您可以在這裏找到的教程：http://browniefed.com/blog/2015/11/28/react-native-how-to-bridge-a-swift-view/

Answer 3

U可以試試這個JS代碼.. https://snack.expo.io/r1v0LwZFb

import React, { Component } from 'react'; 
import { View } from 'react-native'; 

export default class App extends Component { 
    render() { 
    const gradientHeight=500; 
    const gradientBackground = 'purple'; 
     const data = Array.from({ length: gradientHeight }); 
     return (
      <View style={{flex:1}}> 
       {data.map((_, i) => (
        <View 
         key={i} 
         style={{ 
          position: 'absolute', 
          backgroundColor: gradientBackground, 
          height: 1, 
          bottom: (gradientHeight - i), 
          right: 0, 
          left: 0, 
          zIndex: 2, 
          opacity: (1/gradientHeight) * (i + 1) 
         }} 
        /> 
       ))} 
      </View> 
     ); 
    } 
}