javascript - React Native - 在图像上添加蒙版圆圈覆盖

Question

如何在 React Native 中的图像上添加不透明的圆形覆盖？类似于 instagram 图像选择器：

这似乎是一项微不足道的任务，但我在复制它时遇到了麻烦。有什么建议么？

标签： javascriptreactjsreact-nativeimage-masking

Answer 1

正如评论中提到的那样，实现这一点的方法是使用React Native Masked View。

通过运行将其安装到您的项目中：

npm install -S @react-native-community/masked-view

或者

yarn add @react-native-community/masked-view

然后您可以按如下方式使用它。我在README这里为你改编了他们的例子：

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

export default class App extends React.Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#000000', // "Edge" background
          maxHeight: 400,
        }}
      >
        <MaskedView
          style={{ flex: 1 }}
          maskElement={
            <View
              style={{
                // Transparent background mask
                backgroundColor: '#00000077', // The '77' here sets the alpha
                flex: 1,
              }}
            >
              <View
                style={{
                  // Solid background as the aperture of the lens-eye.
                  backgroundColor: '#ff00ff',
                  // If you have a set height or width, set this to half
                  borderRadius: 200,
                  flex: 1,
                }}
              />
            </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: '#2E6D3E' }} />
        </MaskedView>
      </View>
    );
  }
}