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

Question

如何在内部创建渐变

<View />

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

标签： react-nativelinear-gradients

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 的用法及其功能。