美文网首页
React基本操作和组件

React基本操作和组件

作者: AI信仰者 | 来源:发表于2022-05-10 20:33 被阅读0次

    一、基本操作

    1、查看版本后安装

    react-native -v

    npm info react-native

    npm install --save react-native@0.50.0

    同样,

    npm info react

    知道最新版本后,通过以下命令来安装:

    npm install --save react@15.5.0

    二、组件

    1、flex-tabs组件简介

    a. 能够通过传入的对象数据进行增加tab,每当点击传入数据时就会进行添加数据到总的tabs中,能够进行拖动交换位置、删除,当

    点击的tab超过页面能够展示的最大宽度时,进行将第一个tab进行折叠,也能够在折叠的tab中进行点击,展开需要打开的tab页面

    ,在折叠tab中也能够进行删除之前打开的tab

    b.在删除的时候,会按照打开时的队列进行展示被选中的tab页面

    使用说明

    通过下面代码进行新增tab页面

        if (this.flexTabs) {

          const tab = {

            __id,

            name: data[__id]

          };

          this.flexTabs.createTab(tab);

        }

    其中主要方法是createTab,进行创建tab,__id是tab的唯一编号,name用于展示在tab标签上面

    dva是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装;

    数据流向: 

    三、其他操作

    1、百度地图聚合点开发

    <script type="text/javascript" src="/view/static/comp/IndustrialMap/js/textIconOverlay.js"></script>

    <script type="text/javascript" src="/view/static/comp/IndustrialMap/js/maplib.js"></script>

    <script type="text/javascript" src="/view/static/comp/IndustrialMap/js/BMapLib_GeoUtils.js"></script>

    function createMap(obj,proObj,cityObj,level,lo,la) {

    // 百度地图API功能

        if(lo==null&&la==null){

    if(obj!=null&&obj!=''&&obj[0].data!=null){

    //console.log(obj[0].date[0].x);

                lo=obj[0].data[0].x;

    la=obj[0].data[0].y;

    }

    }

    var map =new BMap.Map("allmap",{minZoom:5,maxZoom:18});// 创建Map实例

        if(level==5||(obj==null)||la==null||lo==null||(la==0||lo==0)){

    lo=114.173058;

    la=22.616395;

    level=5;

    }

    map.centerAndZoom(new BMap.Point(lo, la), level);// 初始化地图,设置中心点坐标和地图级别

        map.addControl(new BMap.OverviewMapControl());

    map.setCurrentCity("");// 设置地图显示的城市 此项是必须设置的

        map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放

    function Example(map ,result,area,sum,clickZoom) {

    var xy=result;

    var markers = [];

    var pt =null;

    for (var i inxy) {

    pt =new BMap.Point(xy[i].x ,xy[i].y);

    var content=xy[i].name;

    var marker=new BMap.Marker(pt);

    var assetIcon=10;

    if(xy[i].assetIcon !=undefined &&xy[i].assetIcon !="" &&xy[i].assetIcon !=null){

    assetIcon=xy[i].assetIcon;

    }

    marker.setTitle(xy[i].name+"#"+xy[i].id+"#"+assetIcon);

    markers.push(marker);

    }

    //最简单的用法,生成一个marker数组,然后调用markerClusterer类即可。

        var markerClusterer =new BMapLib.MarkerClusterer(map,

    {

    markers:markers,

    area:area,

    clickZoom:clickZoom,

    sum:sum,

    girdSize :100,

    styles : [{

    url:'/view/static/images/IndustrialMap_img/jhd.png',

    size:new BMap.Size(92,92),

    backgroundColor :'#3385ff'

                }],

    });

    markerClusterer.setMaxZoom(14);

    markerClusterer.setGridSize(100);

    return markerClusterer;

    }

    2、百度地图引入

    const baiduMap =require('baidumap');

    const bdmap = baiduMap.create({'ak':'YGHbweOX30DiGOugVhOBt1gI7b4L5bSu'});

    const detailOption = {'uid':'8ee4560cf91d160e6cc02cd7'};

    bdmap.detail(detailOption,function(err,reuslt){

    if(err){

    console.error('===err=====',err);

    }

    if(reuslt){

    console.log('====result====',reuslt);

    }

    });

    3、通过Iframe引入百度地图

    <iframe

      style={{width:'100%',height:'600px',overflow:'visible'}}  src="/public/static/map1.html"

      width="100%"

      height="600px"

      scrolling="no"

      frameBorder="0"

      overflow="auto"

    />

    四、遇到的坑

    1、UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 80)

    https://objcer.com/2017/12/27/unhandled-promise-rejections-in-node-js/

    http://thecodebarbarian.com/unhandled-promise-rejections-in-node.js.html

    相关文章

      网友评论

          本文标题:React基本操作和组件

          本文链接:https://www.haomeiwen.com/subject/wgfdmqtx.html