React Native 实现水印

一、 本博客参考react-native-WaterMark库，因为显示情况与要求不符，所以在原基础上修改一下。

二、 遇到问题与解决方案：

问题： 文字旋转后，边角留有空白

解决： 将宽度扩大，使用transform进行旋转移动

三、 现存问题

1. 固定定位，不能像背景图一样移动

四、 代码

import React, {Component} from "react";
import PropTypes from 'prop-types';
import {Dimensions} from "react-native";
import Svg, {G,Text,}from 'react-native-svg'

let {height , width} = Dimensions.get('window')

class WaterMark extends Component {

    constructor(props) {
        super(props)
    }

    render() {
        let {canvasWid , canvasHei  , txtSpace , txtLines ,  txtOriginY , txtFont , txtColor , text} = {...this.props}
        canvasWid = canvasWid + 150; // 增大宽度，防止边角留白
        let cos =  Math.cos( 270 * (180 / Math.PI))
        let space = (parseInt(txtSpace) +  (parseInt(txtFont) * 2))
        let beveling = space / cos
        let sideLength = canvasWid + canvasHei
        let rowNum =  Math.ceil(sideLength / beveling)
        let arr = []
        let y = txtOriginY
        for (let i = 0 ; i < rowNum; i++) {
            for (let j = 0; j < txtLines; j++){
                let   x = canvasWid - canvasWid/(txtLines-1)*j
                let svgTxt =
                    <G key={j+""+i}
                       transform= {{ rotation:-30,x:[-300,0],y:[90,0]}}   >
                        <Text
                            x = {x}
                            y={y}
                            stroke="transparent"
                            fill= {txtColor}
                            fontSize= {txtFont}
                        >{text}</Text>
                    </G>;

                arr.push(svgTxt)
            }
            y = y + txtSpace
        }
        return(
            <Svg
                pointerEvents="none"
                height={canvasHei}
                width={canvasWid}
                style={{backgroundColor: 'transparent' , position: 'absolute'}}    //画布默认是透明的
            >
                <G>{arr}</G>
            </Svg>

        )
    }
}

WaterMark.defaultProps = {
    canvasWid:  width ,                                                           //水印画布的宽度
    canvasHei:  height,                                                           //水印画布的高度
    txtSpace:   100,                                                              //水印文字之间的行间距
    txtLines:   4,                                                                //水印的列数
    txtOriginY: 20,                                                               //文字距离画布上边界的距离
    txtFont:    11,                                                               //水印字体大小
    txtColor:   "rgba(174,174,174,0.2)",                                          //水印字体颜色
    text:       '',                                                               //水印文字内容

}

WaterMark.propTypes = {
    canvasWid:  PropTypes.oneOfType([PropTypes.string , PropTypes.number]),     //水印画布的宽度
    canvasHei:  PropTypes.oneOfType([PropTypes.string , PropTypes.number]),     //水印画布的高度
    txtSpace:   PropTypes.oneOfType([PropTypes.string , PropTypes.number]),     //水印文字之间的行间距
    txtLines:   PropTypes.oneOfType([PropTypes.string , PropTypes.number]),     //水印的列数
    txtOriginY: PropTypes.oneOfType([PropTypes.string , PropTypes.number]),     //文字距离画布上边界的距离
    txtFont:    PropTypes.oneOfType([PropTypes.string , PropTypes.number]),     //水印字体大小
    txtColor:   PropTypes.string,                                               //水印字体颜色
    text:       PropTypes.string,                                               //水印文字内容
}

export {WaterMark}

　调用方法：

   <WaterMark text={"Ayinger水印"}></WaterMark>