react-native 根据链接自动生成二维码

地址：https://www.npmjs.com/package/react-native-qrcode-svg

import React, {Component} from 'react';

import {Image, StyleSheet, Text, TouchableOpacity, View,TouchableHighlight} from "react-native";
import Util from "../common/util";
import Category from "../category/Category";
import Console from "../common/Console";
import * as URLconstant from "../constant/URLconstant";
import request from "../constant/request";
import MyStroage from "../common/myStroage";
import Toast from "../common/ToastUtil";
import QRCode from "react-native-qrcode-svg";  // 二维码


class Detail extends Component {
    constructor(p) {
        super(p);
        this.state={
            index:0,
            currentIndex:1,
            detailList:[
                {name:'图库',id:1},
                {name:'视频',id:2},
                {name:'评论',id:3},
            ],

            goodsInfo:{},
        }
    }

    componentDidMount() {
        Console.log('componentDidMount_Detail_goods_id',this.props.goods_id)

        let url = URLconstant.GOODS_DETAIL_URL
        let datakey={
            goods_id:this.props.goods_id,
            store_id:285746,
            newSas:1
        }
        Console.log('详情页请求路径与参数===',url,'params=====',datakey)
        request.get(url,datakey,this.detialSuc.bind(this),this.errorCallback.bind(this))
    }

    detialSuc(res){
        Console.log('详情页返回数据====',JSON.stringify(res))
        this.setState({
            goodsInfo:res.data.goodsInfo
        })

    }

    errorCallback(err){
        Console.log('detail接收失败',err,'')
    }


    //切换视频、评论、图库
    _switchIndex(id){
        // Console.log('id',id)
        this.setState({
            currentIndex:id
        })
    }


    _renderBody(){
        let {currentIndex} = this.state
        switch (currentIndex) {
            case 1:
                return(
                    <View>
                        {
                            this._renderPicture()
                        }
                    </View>
                );break;
            case 2:
                return(
                    <View>
                        {
                            this._renderVedio()
                        }
                    </View>

                );break;
            case 3:
                return(
                    <View>
                        {
                            this._renderComment()
                        }
                    </View>

                );break;
        }

    }
    //图库
    _renderPicture(){
        let {goodsInfo} = this.state
        let bannerImg = require('../images/home/detail_img.jpg')
        return(
            <View >
                <Image source={{uri:`${goodsInfo.default_image}`}} style={styles.right_detail_img}></Image>
            </View>
        )
    }
    //视频
    _renderVedio(){
        return(
            <View >
                <Text>视频</Text>
            </View>
        )
    }
    //评论
    _renderComment(){
        return(
            <View >
                <Text>评论</Text>
            </View>
        )
    }

    render() {
        let {currentIndex,goodsInfo} = this.state

        // let codeimg = require('../images/home/erweima.jpg')

        return (
            <View style={styles.content}>
                <View style={styles.left}>
                    <View style={{justifyContent: 'center',alignItems: 'center'}}>
                        <Text style={{marginBottom: 10}}>{goodsInfo.goods_name}</Text>
                        <QRCode
                            value={`${goodsInfo.bar_code}`}
                        />
                        {/*<Image source={{uri:`${goodsInfo.bar_code}`}} style={{width:120,height:120,marginTop: 10}}></Image>*/}

                    </View>
                    <View>
                        <Text style={{marginBottom: 10}}>商品品牌：{goodsInfo.brand_id}</Text>
                        <Text style={{marginBottom: 10}}>商品型号：{goodsInfo.sku}</Text>
                        <Text style={{marginBottom: 10}}>产&emsp;&emsp;地：路易公馆</Text>
                        <Text style={{marginBottom: 10}}>线上价格：&yen;{goodsInfo.market_price}</Text>
                        <Text style={{marginBottom: 10}}>门店价格：&yen;{goodsInfo.price}</Text>
                    </View>
                </View>


                <View style={styles.right}>
                    <View style={[styles.right_content_title]}>
                        {
                            this.state.detailList.map((item,id)=>{
                                return(
                                    <TouchableHighlight
                                        onPress={this._switchIndex.bind(this,item.id)} key={item.id}
                                        onFocus={()=>{}}
                                        onBlur={()=>{}}
                                    >
                                        <Text style={{marginRight: 60,color:currentIndex==item.id?'#000':'#333',}}>{item.name}</Text>
                                    </TouchableHighlight>
                                )
                            })
                        }
                    </View>

                    {/*视频媒体评论*/}
                    {this._renderBody()}

                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
// 内容
    content:{
        height:Util.size.height - 120,
        width:Util.size.width - 90,
        marginTop:10,
        flexDirection: "row",
        backgroundColor:'#f2f2f2',
        padding:10,
    },
    left:{
        flex:1,
        justifyContent:'space-between',
        alignItems:'center'
    },
    right:{
        flex:3,
        marginLeft:40
    },

    right_content_title:{
        flexDirection: 'row',
        marginBottom:10,
    },
    right_detail_img:{
        width:'99.5%',
        height:'95%',
        borderRadius:7
    },
})

export default Detail;