用于 Android 的 React Native MaskedView

【问题标题】：React Native MaskedView for Android用于 Android 的 React Native MaskedView
【发布时间】：2018-03-16 16:12:27
【问题描述】：

React Native 有内置的 MaskedViewIOS 用于 ios，它运行良好。我想知道android是否也有类似的东西。查看 React Native 的源代码，有一个名为 MaskedView 的内置组件，我怀疑它应该适用于两个平台（iOS 和 Android）。但是，尝试以与MaskedViewIOS 相同的方式使用它，会出现一些错误。

附：我还没有在 Android 上使用过MaskedView（因为它在 iOS 上坏了）

P.P.S MaskedView 是 underfined，所以我猜它目前不支持 Android。可能有任何第三个开源库吗？

【问题讨论】：

标签： react-native view mask

【解决方案1】：

我的react-native-image-filter-kit 库可以涵盖很多 MaskedViewIOS 使用场景。来自 RN docs 的“文字背后的图像”示例：

import { Image } from 'react-native'
import { DstATopComposition, TextImage } from 'react-native-image-filter-kit'

const masked = (
  <DstATopComposition
    style={{ backgroundColor: 'red' }}
    resizeCanvasTo={'dstImage'}
    dstImage={
      <Image
        style={{ width: 320, height: 320 }}
        source={{ uri: 'https://una.im/CSSgram/img/cacti.jpg' }}
        resizeMode={'contain'}
      />
    }
    srcImage={
      <TextImage
        fontName={'Gagarin'}
        text={'basic mask'}
        fontSize={80}
      />
    }
  />
)

安卓：

iOS：

附： Gagarin 字体取自here 并重命名为'Gagarin.ttf'

【讨论】：