diff --git a/zh-cn/react-native-image-marker.md b/zh-cn/react-native-image-marker.md new file mode 100644 index 0000000000000000000000000000000000000000..f8b18a4293e7c3961ffd94ff0274794237fa7046 --- /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"} + +