React-Native 中的线性渐变背景颜色

Question

在我的应用程序中，我需要动态更改背景颜色。通过回调从子视图到父视图的更改。 目前它看起来像这样：

子视图：

onButton1Press() {
 this.props.callbackFromParent('#ff4c00');
}

父视图：

myCallback = (dataFromChild) => {
 this.setState({ backgroundColor: dataFromChild }); 
}

效果很好，但问题是我需要实现线性渐变背景色。

我找到了一个'react-native-linear-gradient' 库，它在其他视图（如按钮）上运行良好，但我无法将其设置为背景颜色。

例子：

    <LinearGradient colors={['#085d87', '#27c7bb']}
       start={{ x: 0, y: 1 }}
       end={{ x: 1, y: 0 }}>
        <Text style={styles.buttonText}>LinearGradient</Text>
    </LinearGradient>

可以将背景颜色设置为渐变吗？是否有另一种方法可以在 react-native 中实现？谢谢。

Answer 1

Expo有LinearGradient，很简单。

import { LinearGradient } from 'expo';

<LinearGradient
   colors={['#4c669f', '#3b5998', '#192f6a']}
   style={{ padding: 15, alignItems: 'center', borderRadius: 5 }}>
     <Text
       style={{
         backgroundColor: 'transparent',
         fontSize: 15,
         color: '#fff',
       }}>
       Sign in with Facebook
     </Text>
   </LinearGradient>

Answer 2

如果你想把它放在后台，那么你只需要用你的view包装<LinearGradient，即背景 示例：

<View style={{flex:1}}>
   <LinearGradient color={[...]} style={{flex:1}}>
    ...//Your component
   </LinearGradient>
</View> 

希望这会有所帮助！

Answer 3

您可以创建自定义类或组件，并在子组件上按下按钮时使用它来更改父视图。

示例代码：

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

export default class Gradient extends Component {
  render() {
    const  gradientHeight=500;
    const gradientBackground  = 'purple';
    const data = Array.from({ length: gradientHeight });
      return (
          <View style={{flex:1,justifyContent:'center'}}>
              {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)
                      }}
                  />
              ))}
              <Text style{{textAlign:'center',alignSelf:'center',fontSize:25}}>Hello</Text>
          </View>
      );
  }
}