https://github.com/ljunb/react-native-anchor-tag
A simple anchor tag view for React Native App.
https://github.com/ljunb/react-native-anchor-tag
anchor react-native tag
Last synced: about 2 months ago
JSON representation
A simple anchor tag view for React Native App.
- Host: GitHub
- URL: https://github.com/ljunb/react-native-anchor-tag
- Owner: ljunb
- License: mit
- Created: 2017-07-12T12:56:38.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-03-12T08:26:41.000Z (about 1 year ago)
- Last Synced: 2025-03-28T23:44:05.658Z (2 months ago)
- Topics: anchor, react-native, tag
- Language: JavaScript
- Homepage:
- Size: 1.73 MB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-anchor-tag
[](https://www.npmjs.com/package/react-native-anchor-tag)
[](https://www.npmjs.com/package/react-native-anchor-tag)
[](https://github.com/ljunb/react-native-anchor-tag/blob/master/LICENSE)
A light anchor tag view for react-native apps. You may be used to display some anchor tag information for the image. Written in JS for cross-platform support. Enjoy it! 🎉🎉
## Preview
## Install
Install with npm:
```
npm install react-native-anchor-tag --save
```
or with yarn:
```
yarn add react-native-anchor-tag
```
## Demo
See [RNAnchorTagDemo](https://github.com/ljunb/RNAnchorTagDemo).
## Usage
```js
import React, {Component} from 'react';
import {
StyleSheet,
Dimensions,
View,
Image
} from 'react-native';
import AnchorView from "react-native-anchor-tag";
const {width: screenW} = Dimensions.get('window');
export default class RNAnchorTagDemo extends Component {
data = {
coverHeight: 646, // source image height
coverWidth: 750, // source image width
tagList: [
{name: '远处云层', x: 100, y: 150},
{name: '明亮的太阳', x: 640, y: 410},
{name: '书页', x: 280, y: 460},
{name: '木地板', x: 400, y: 600}
]
};
renderAnchorItem = (tag, key) => {
const {coverWidth, coverHeight} = this.data;
const {x, y} = tag;
// expect image width
const imgWidth = screenW - 15 * 2;
// convert image height base on expect width
const imgHeight = imgWidth * coverHeight / coverWidth;
// convert anchor position base on the expect image layout
const convertX = x * imgWidth / coverWidth;
const convertY = y * imgHeight / coverHeight;
return
};
render() {
const {tagList, coverHeight, coverWidth} = this.data;
const uri = 'http://img02.tooopen.com/images/20160509/tooopen_sy_161967094653.jpg';
// convert to expect image layout
const imgWidth = screenW - 15 * 2;
const imgHeight = imgWidth * coverHeight / coverWidth;
return (
{tagList.map(this.renderAnchorItem)}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
padding: 15
},
});
```
## Props
Prop | Type | Optional | Default | Description
---------------- | ------ | -------- | --------- | -----------
anchor | object | No | | anchor entity (name, x, y)
backgroundWidth | number | Yes | screenW - 15*2 | determine the width of the background container that will change the direction of the anchor tag