rna

react-native-anchor-tag

A simple anchor tag view for React Native App.

Showing:

Popularity

Downloads/wk

0

GitHub Stars

9

Maintenance

Last Commit

4yrs ago

Contributors

0

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-native-anchor-tag

npm npm npm

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

ios android

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

PropTypeOptionalDefaultDescription
anchorobjectNoanchor entity (name, x, y)
backgroundWidthnumberYesscreenW - 15*2determine the width of the background container that will change the direction of the anchor tag

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial