Example 1

Example 2

如何在react native中淡化上述图像这样的视图边缘?

推荐答案

在iOS上,可以使用MaskedViewIOS组件为淡入效果创建透明的alpha遮罩.

对于淡入淡出的渐变本身,你可以使用react-native-linear-gradient(它也内置在Expo中)或半透明图像(黑色像素将显示内容,透明像素将屏蔽内容).

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

这是example on Snack美元.

不幸的是,MaskedView尚未在Android上实现.我不知道有什么简单的方法可以实现这一点,但我很高兴被证明是错误的.

React-native相关问答推荐

对iOS通知上未显示的本机映像做出react

如何根据设备主题更改React Native中状态栏的背景?

@react-native-community/cli-platform-ios/native_modules' 来自哪里?

在 React Native 中使用 Flatlist scrollView 时的模式关闭

React Native TextInput 在android上打开时会自动关闭

React Native 转换与枢轴点

你如何在生产模式下运行 react-native 应用程序?

redux-observable Promise 在单元测试中没有得到解决

React-Native Android 中隐藏(hide)的元素溢出

没有找到 `React-fishhook` 的 podspec

试图注册两个具有相同名称 ProgressBarAndroid 的视图

mapDispatchToProps:有什么意义吗?

React Native 检测点击 View

动画属性启动时 ReactNative ActivityIndi​​cator 不显示 false

React Native 无法运行堆栈跟踪

如何在react-native中关闭模态

Mapping children of a parent component

React Navigation 切换背景 colored颜色 和样式 StackNavigator

将 Picker 绑定到 React Native 中的 Picker.Item 列表

如何定义react-native应用程序的入口点