如何在本机反应中创建线性渐变（在图像顶部和应用栏下方）

Question

我正在使用expo SDK 36

我想在图像顶部和应用栏下方添加线性渐变，这样它将始终显示后退按钮，如下所示：

这是我用react-native-svg尝试过的方法，但未显示任何内容：

        <Svg
          xmlns="http://www.w3.org/2000/svg"
          width="100%"
          height="56"
          viewBox="0 0 375 507"
          style={{ position: 'absolute', top: 0, height: 56 }}
        >
          <LinearGradient
            locations={[0, 1.0]}
            colors={['rgba(0,0,0,0.00)', 'rgba(0,0,0,0.80)']}
            style={{
              position: 'absolute',
              top: 0,
              width: '100%',
              height: 56,
            }}
          />
        </Svg>

[我也尝试过https://github.com/react-native-community/react-native-linear-gradient的方式很多，但是我能得到的最好的结果是在网上，并且是一条白色的不透明线，我像这样使用它：

class Swiper extends React.Component {
  render() {
    const {
      item: {
        photoList,
        id,
      },
      config,
      dimensions,
    } = this.props;

    const styles = StyleSheet.create({
      container: {
        height: 300,
        width: dimensions.width,
      },
      linearGradient: {
        top: 0,
        width: dimensions.width,
        height: 50,
      },
    });

    const { urls } = config.env();

    return (
      <View style={styles.container}>
        <LinearGradient colors={['#000', 'transparent']} style={styles.linearGradient}>
          <RNWSwiper
            from={0}
            minDistanceForAction={0.1}
          >
            {photoList.length > 0 && photoList.map(({ filename }) => (
              <View
                key={filename}
                style={{
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: 'transparent',
                }}
              >
                <Image
                    style={{ minHeight: '100%', minWidth: '100%' }}
                    source={{ uri: `${urls.dataApi}/resources/${id}/lg/${filename}` }}
                  />
              </View>
            ))}
          </RNWSwiper>
        </LinearGradient>
      </View>
    );
  }
}

在网络上，它给我以下错误：

Uncaught (in promise) TypeError: Object(...) is not a function
    at Module.../../../react-native-linear-gradient/common.js (common.js:6)
    at __webpack_require__ (bootstrap:769)
    at fn (bootstrap:129)
    at Module.../../../react-native-linear-gradient/index.ios.js (index.android.js:37)
    at __webpack_require__ (bootstrap:769)
    at fn (bootstrap:129)
    at Module.../../../react-native-linear-gradient/index.js (index.ios.js:29)
    at __webpack_require__ (bootstrap:769)
    at fn (bootstrap:129)
    at Module.../../../../src/views/Swiper/index.js (DetailsView.js:117)
    at __webpack_require__ (bootstrap:769)
    at fn (bootstrap:129)
    at Module.../../../../src/views/DetailsView.js (index.js:1)
    at __webpack_require__ (bootstrap:769)
    at fn (bootstrap:129)

在android和ios上（不同但相同的错误）：

我唯一的要求是渐变必须在ios / android和网络上都可以。

如何创建渐变？

Answer 1

您可以使用react-native-linear-gradient

Answer 2

您可以在固定在顶部的元素中使用linear-gradient CSS属性。

注意：linear-gradient这里的.8表示80％黑色。

rgba(0,0,0,.8)

.gradient {
  position: fixed;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
  z-index: 100;
  background: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,0))
}
body { margin: 0; }