React native 如何在React中生成线性梯度背景

如何在室内设置坡度

<View />

尝试以下步骤：

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>

//在此处设置内容或元素

您可以使用LinearGradient而不是视图，并将内容放在其中

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

试验

但也可以将视图用作LinearGradient中的内容

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

试验

我还用源代码解释了react native linear gradient的用法及其特性。

如果您使用的是expo， 我已经创建了一个单独的组件

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

从'@src/theme/typography'导入{font}
从“expo linear gradient”导入{LinearGradient}
从“React”导入React
从“react native”导入{ViewStyle，StyleProp，StyleSheet，Text}
常量按钮=（道具）=>{
const{style，text}=props
返回(
{text}
)
}
const styles=StyleSheet.create({
容器：{
身高：48，
边界半径：8
},
正文：{
textAlign:'中心'，
marginTop:“自动”，
marginBottom:“自动”，
颜色：“#fefffe”，
尺码：18，
fontFamily:fonts.medium，
}
})
导出默认按钮