react-native实现假象的水印

react-native实现假象的水印

主要代码块

一：

import React, { Component } from "react";
import {
  View,
  Text,
  Dimensions,
  StyleSheet,
  ViewPropTypes
} from 'react-native';
import PropTypes from 'prop-types';

const WIDTH = Dimensions.get('window').width
const HEIGHT = Dimensions.get('window').height

class WatermarkView extends Component {
  constructor(props) {
    super(props);
    this.renderWatermark = this.renderWatermark.bind(this);
  }

  static propTypes = {
    foreground: PropTypes.bool,
    style: ViewPropTypes.style,
    watermark: PropTypes.string,
    itemWidth: PropTypes.number,
    itemHeight: PropTypes.number,
    watermarkTextStyle: Text.propTypes.style,
    rotateZ: PropTypes.number
  }

  renderWatermark() {
    const { watermark='', itemWidth=160, itemHeight=100, watermarkTextStyle, rotateZ = -45 } = this.props;
    if (typeof watermark != 'string' || (typeof watermark == 'string' && watermark.length < 1)) {
      return null;
    }
    const items = new Array()
    for (let index = 0; index < 50; index++) {
      const item = (
        <View
          key={'watermark_item' + index}
          style={[styles.watermarkItem, { width: itemWidth, height: itemHeight, transform: [{ rotateZ: rotateZ+'deg' }] }]}
        >
          <Text style={[{ color: 'rgba(0,0,0,0.2)', fontSize: 20 }, watermarkTextStyle]}>{watermark}</Text>
        </View>
      )
      items.push(item);
    }
    return (
      <View style={styles.watermarkContainer} pointerEvents={'none'}>
        {items}
      </View>
    )
  }

  render() {
    const { foreground, style } = this.props;
    return (
      <View style={[styles.container, style, { overflow: 'hidden' }]}>
        {!foreground ? this.renderWatermark() : null}
        {this.props.children}
        {foreground ? this.renderWatermark() : null}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  watermarkContainer: {
    flex:1,
    backgroundColor: 'rgba(0,0,0,0)',
    position: 'absolute',
    // left: 0,
    // right: 0,
    // top: 0,
    // bottom: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    // alignItems: 'center',
    flexWrap: 'wrap',
    alignContent: 'flex-start'
  },
  watermarkItem: {
    backgroundColor: 'rgba(0,0,0,0)',
    justifyContent: 'center',
    alignItems: 'center',
  }
})

export default WatermarkView;

二：引用。不知道的属性可以查看源码

<WatermarkView
    foreground={visible?true:false}
     watermark={this.state.watermark}
     style={{justifyContent:'flex-start'}}
     itemWidth={this.state.itemWidth}
     itemHeight={this.state.itemHeight}
     rotateZ={this.state.rotateZ}
     watermarkTextStyle={ styles.watermarkTextStyle }
   >
</WatermarkView>

引用地址：https://github.com/xiaochenjie/react-native-image-marker