Question

如何在内部创建渐变

<View />

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

Answer 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的用法。

Answer 2

尝试以下步骤：

1）从LinearGradiant库导入react-native-linear-gradient。

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

2）将一些flex值设置为LinearGradiant

<LinearGradient
     colors= {['#33ccff, #ff99cc ]}
     style= {{ flex:1 }}>

      <View>
          //set your content or elements here
      </View>
</LinearGradient>

Answer 3

如果您正在使用博览会，我创建了一个单独的组件

您可以将其导入任何组件并使用

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

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

3 个答案: