如何在 React-native 中制作线性渐变背景答案

【问题标题】：How to make linear-gradient background in React-native如何在 React-native 中制作线性渐变背景
【发布时间】：2019-12-17 13:28:54
【问题描述】：

如何在内部创建渐变

<View />

https://github.com/react-native-community/react-native-linear-gradient

【问题讨论】：

标签： react-native linear-gradients

【解决方案1】：

您可以使用 LinearGradient 代替 View 并将您的内容放在那里。

  <LinearGradient
    colors={['#373B44', '#4286f4', '#373B44']}
    style={{
      flex: 1,
    }}
  >
    <Text>
      Test
    </Text>
  </LinearGradient>

但您也可以将 View 用作 LinearGradient 中的内容。

  <LinearGradient
    colors={['#373B44', '#4286f4', '#373B44']}
    style={{
      flex: 1,
    }}
  >
    <View
      style={{
        margin: 20,
      }}
    >
      <Text>
        Test
      </Text>
    </View>
  </LinearGradient>

我还用源代码解释了 react-native-linear-gradient 的用法及其功能here。

【讨论】：

【解决方案2】：

如果您使用的是世博会，我创建了一个单独的组件

你可以在任何组件中导入并使用它

import { fonts } from '@src/theme/typography'
import { LinearGradient } from 'expo-linear-gradient'
import React from 'react'
import { ViewStyle, StyleProp, StyleSheet, Text } from 'react-native'


const Button = (props) => {
    const { style, text } = props
    return(
        <LinearGradient 
        colors={['#ffa700', '#ff9300']}
        style={[styles.container, style]}>
        <Text style={styles.text}>
        {text}
        </Text>
        </LinearGradient>
    )
}

const styles = StyleSheet.create({
    container: {
        height: 48,
        borderRadius: 8
    },
    text: {
        textAlign: 'center',
        marginTop: 'auto',
        marginBottom: 'auto',
        color: '#fefffe',
        fontSize: 18,
        fontFamily: fonts.medium,

    }
})

export default Button

【讨论】：

【解决方案3】：

试试这个步骤：

1) 从react-native-linear-gradient 库中导入LinearGradient。

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

2) 将一些弹性值设置为LinearGradient

<LinearGradient
    colors={['#33ccff', '#ff99cc']}
    style={{ flex:1 }}
>
    <View>
        //set your content or elements here
    </View>
</LinearGradient>

【讨论】：