【问题标题】: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 MaskedViewunderfined,所以我猜它目前不支持 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'

    【讨论】:

      猜你喜欢
      • 2016-01-04
      • 1970-01-01
      • 1970-01-01
      • 2016-01-04
      • 2023-03-09
      • 2016-08-14
      • 1970-01-01
      • 2020-03-25
      • 2017-06-08
      相关资源
      最近更新 更多