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

解决方案是使用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>
  );
}

Answer 3

请为裸反应原生安装导入“react-native-linear-gradient”。它工作得很好。使用开始和结束 - x & y 位置来调整渐变。 follow this blog for more detail

import React from 'react'
import LinearGradient from "react-native-linear-gradient";


return(
 <> 
  <LinearGradient
        colors={['red', 'orange']}
        style={styles.gradientContainer}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        >
            <View>
                <Text>Hello world</Text>
            </View>


        </LinearGradient>
  
 </> )

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

3 个答案: