Question

如何淡化视图的边缘，如上图中的本地反应？

Answer 1

在iOS上，您可以使用MaskedViewIOS组件为淡入淡出效果创建透明的alpha蒙版。

对于渐变渐变本身，您可以使用react-native-linear-gradient（也包含在Expo中）或半透明图像（黑色像素将显示内容，透明像素将阻止蒙版内容）。

<MaskedViewIOS 
  maskElement={
    <LinearGradient colors={['black', 'transparent']} />
  }
>
  <YourContent />
</MaskedViewIOS>

这是example on Snack。

不幸的是，MaskedView尚未在Android上实现。我不知道实现这个的简单方法，但很高兴被证明是错误的。

Answer 2

您可以将视图包装成

之类的内容

<BackgroundContainer>
  <LinearGradient>
    <UserList>
  </LinearGradient>
</BackgroundContainer>

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

然后使用alpha通道（rgba（））来获得您正在寻找的透明效果。

Answer 3

您可以使用：https://github.com/react-native-community/react-native-masked-view。

它同时支持Android和iOS。

import React from 'react';
import { Text, View } from 'react-native';
import MaskedView from '@react-native-community/masked-view';

export default class App extends React.Component {
  render() {
    return (
      <MaskedView
        style={{ flex: 1, flexDirection: 'row', height: '100%' }}
        maskElement={
          <View
            style={{
              // Transparent background because mask is based off alpha channel.
              backgroundColor: 'transparent',
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center'
            }}
          >
            <Text
              style={{
                fontSize: 60,
                color: 'black',
                fontWeight: 'bold'
              }}
            >
              Basic Mask
            </Text>
          </View>
        }
      >
        {/* Shows behind the mask, you can put anything here, such as an image */}
        <View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} />
        <View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} />
        <View style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} />
        <View style={{ flex: 1, height: '100%', backgroundColor: '#e1e1e1' }} />
      </MaskedView>
    );
  }
}

Answer 4

我知道这篇文章很旧，但对于现在正在看这篇文章的任何人，您可以像这样在 ScrollView 上设置 FadingEdgeLength 以实现该效果。请注意，它仅适用于 Android。例如：

<ScrollView fadingEdgeLength={100}>
  ... scroll view content ...
</ScrollView>

如何淡化View的边缘反应原生？

4 个答案: