React-Native 中的线性梯度答案

【问题标题】：Linear Gradient In React-NativeReact-Native 中的线性梯度
【发布时间】：2017-10-11 20:02:57
【问题描述】：

我有一个组件，我想要在 react native 中从右下角到左上角的线性渐变，我尝试使用 from 'react-native-linear-gradient' 但它不起作用。

组件：

// 渲染返回

   return( 
      <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} >
       <View style={styles.container}>
         <View  style={styles.topPart}>
           <Header ></Header>
           <Content ></Content>
        </View>  
        <Footer style={styles.footer}></Footer>
      </View>
    </LinearGradient>  
);

请指导如何实现。

【问题讨论】：

标签： android css react-native

【解决方案1】：

安装react-native-linear-gradient库后：

npm install --save react-native-linear-gradient

尝试将项目的所有依赖项链接为，

react-native link

并确保您将LinearGradient 导入为，

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

最后但最重要的事情是为您的LinearGradient 设置一些flex 值，

<LinearGradient 
     colors={['#6e45e2', '#88d3ce']}
     style = { styles.container }>

          <View>
               //your elements here
          </View> 
 </LinearGradient>

您的 LinearGradient style 为，

const styles = StyleSheet.create({
  container: {
      flex: 1,
  }
});

注意我确定您的渐变不可见，因为 flex 值，只需添加它。一定会成功的。

【讨论】：

【解决方案2】：

您可以通过将开始和结束位置设置为道具来实现倾斜渐变。在你的情况下，那些应该是：

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

如果您的意思是根本看不到任何渐变，您是否按照安装说明链接了库？

【讨论】：

它根本没有显示任何 gradinet，我已经使用 npm 安装了库并将其导入到我的项目中，我还需要做什么

【解决方案3】：

如果您已经使用 npm 安装了该库并将其导入到您的项目中，您仍然需要链接该库。通过运行链接库，

react-native link

【讨论】：

【解决方案4】：

<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} start={{x: 0, y: 0}} end={{x: 1, y: 1}}>
....
</LinearGradient>

这几乎可以解决您正在寻找的问题。

【讨论】：