Как создать линейный градиент в реакции-нативном (поверх изображения и под панелью приложения)

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 (другая, но такая же ошибка):

My Единственное требование заключается в том, что градиент должен работать на ios / android и в Интернете.

Как я могу создать этот градиент?

Answer 1

Решение было использовать 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 2

Вы можете использовать реакции-нативный-линейный-градиент