Question

我有一个组件，我想要一个从右下角到左上方的反应原生的线性渐变，我尝试使用'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>  
);

请指导如何实现这一目标。

Answer 1

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

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

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

react-native link

并确保您导入LinearGradient as，

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

最后但最重要的是为flex设置LinearGradient值，

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

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

您的LinearGradient style as，

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

注意我确定您的渐变因flex值而无法显示，只需添加即可。它肯定会奏效。

Answer 2

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

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

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

Answer 3

如果您已使用npm安装该库并将其导入到项目中，则仍必须链接该库。通过运行

链接库

react-native link

Answer 4

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

这几乎可以解决您要寻找的东西。

React-Native中的线性渐变

4 个答案: