react-native-anchor-tag

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.

Usage

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 <AnchorView key={key} anchor={{...tag, x: convertX, y: convertY}}/>
    };

    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 (
            <View style={styles.container}>
                <Image style={{width: imgWidth, height: imgHeight}} source={{uri}}>
                    {tagList.map(this.renderAnchorItem)}
                </Image>
            </View>
        );
    }
}

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