react-native - 如何在 react-native 中创建线性渐变（在图像顶部和应用栏下方）

问题描述

我正在使用 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 和 web 上工作。

我怎样才能创建那个渐变？

标签： react-nativereact-native-androidexporeact-native-iosreact-native-web

解决方案是使用https://docs.expo.io/versions/latest/sdk/linear-gradient/

import React from 'react';
import {
  Dimensions,
  StyleSheet,
  View,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';


export default function App() {
  const { width } = Dimensions.get('window');
  const styles = StyleSheet.create({
    fixedTop: {
      zIndex: 1,
      position: 'absolute',
      top: 0,
      width,
      height: 100,
    },
    linearGradient: {
      width,
      height: 75,
    },
  });

  return (
    <View style={styles.fixedTop} pointerEvents="none">
      <LinearGradient
        colors={[
          '#000',
          'transparent',
        ]}
        style={styles.linearGradient}
      />
    </View>
  );
}

react-native - 如何在 react-native 中创建线性渐变（在图像顶部和应用栏下方）

问题描述

解决方案

推荐阅读