React基本操作和组件
一、基本操作
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
