From c484c29e20c43a5d756855afb68c50e95c059c43 Mon Sep 17 00:00:00 2001 From: guichuang <13343468815@163.com> Date: Thu, 1 Aug 2024 16:06:18 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=96=B0=E5=A2=9Ereact-native-image-ma?= =?UTF-8?q?rker=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-image-marker.md | 456 +++++++++++++++++++++++++++++ 1 file changed, 456 insertions(+) create mode 100644 zh-cn/react-native-image-marker.md diff --git a/zh-cn/react-native-image-marker.md b/zh-cn/react-native-image-marker.md new file mode 100644 index 00000000..f8b18a42 --- /dev/null +++ b/zh-cn/react-native-image-marker.md @@ -0,0 +1,456 @@ +> 模板版本：v0.2.2 + +

+

react-native-image-marker

+

+

+ + Supported platforms + + + License + +

+ + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-marker) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-image-marker Releases](https://github.com/react-native-oh-library/react-native-image-marker/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-image-marker@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-image-marker@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```tsx +import Marker, { + Position, ImageMarkOptions, TextMarkOptions + } from 'react-native-image-marker' +import React, { useState } from "react"; +import { StyleSheet, ScrollView, Text, View, Button, Image } from "react-native"; +import { Colors } from 'react-native/Libraries/NewAppScreen'; + +export const ImageMarkerText = () => { + const [texturl, setTextMarkUrl] = useState(''); + const [imageurl,setImageMarkUrl] = useState(''); + const text_options: TextMarkOptions = { + backgroundImage: { src: require('./assets/code-images/1.png') }, + watermarkTexts: [{ + text: 'hello world \n 你好', + position: { + position: Position.topLeft, + }, + style: { + color: '#FFFF00', + fontSize: 30, + fontName: 'Arial', + rotate: 30, + textBackgroundStyle: { + padding: '10% 10%', + color: '#02B96B', + }, + shadowStyle: { + dx: 10, + dy: 10, + radius: 10, + color: '#008F6D', + }, + strikeThrough: true, + underline: true, + }, + }, { + text: 'hello world \n 你好', + position: { + position: Position.center, + }, + style: { + color: '#FFFF00', + fontSize: 30, + fontName: 'Arial', + textBackgroundStyle: { + padding: '10% 10%', + color: '#0FFF00', + }, + strikeThrough: true, + underline: true, + }, + }], + } + + const image_options: ImageMarkOptions = { + backgroundImage: { src: require('./assets/code-images/1.png') }, + watermarkImages: [{ + src: require('./assets/pravatar-131.jpg'), + rotate:20, + position: { + position: Position.topLeft, + }, + }, + { + src: require('./assets/pravatar-131.jpg'), + rotate:50, + position: { + position: Position.bottomCenter, + }, + } + ], + } + + const markText = () => { + Marker.markText(text_options).then((result) => { + setTextMarkUrl(result) + }).catch(error => { + console.log('error', error) + }) + } + + const markImage = () => { + Marker.markImage(image_options).then((result) => { + setImageMarkUrl(result) + }).catch(error => { + console.log('error', error) + }) + } + return ( + + + + + {"image marker"} + +