rn_supermap/NativeModule/components/SMOuterListComponent.js

rn_supermap 一款基于React-Native框架的移动应用开发工具。基于该开发工具，用户可以使用JavaScript开发语言，开发出在Android和IOS操作系统下运行的原生移动GIS应用，入门门槛低，一次开发，处处运行。

/*********************************************************************************
 Copyright © SuperMap. All rights reserved.
 Author: Zihao Wang
 E-mail: pridehao@gmail.com
 Description:内层list控件。
 
 **********************************************************************************/

import React, { Component } from 'react';
import {
  View,
  FlatList,
  PixelRatio,
} from 'react-native';

//imobile类引入
import workspaceModule from '../Workspace.js';
import dataSources from '../Datasources.js';
//子组件倒入
import OuterListItem from './SMOuterListItem.js';

export default class OuterListComponent extends Component {
  constructor(props){
    super(props);

    this.state = {
      data: false,
    };

    //数据获取
    var dataArr = [];
    var workspace = props.workspace;
    (async function ( ) {
      var dataSources = await workspace.getDatasources();
      var count = await dataSources.getCount();
      for (var i=0; i<=count-1;i++){
        var dsName = await dataSources.getAlias(i);
        var dataItem = {key:'_SMDs'+i,Text:dsName,Image:require('../resource/DsList.png'),Index:i};
        dataArr.push(dataItem);
      }

      this.setState({
        data: dataArr,
      });
    }).bind(this)();

 
  }
//item渲染方法
  _renderItem=({item})=>(
    <OuterListItem Image={item.Image} Text={item.Text} Index={item.Index} workspace={this.props.workspace}/>
  );

//分割线组件
  _separator=()=>{
    return <View style={{height:1 / PixelRatio.get(),backgroundColor: '#bbbbbb',marginLeft: 15,}}/>
  }

  render() {
    return (
      <FlatList data={this.state.data}
                renderItem={this._renderItem}
                ItemSeparatorComponent={this._separator}/>
    );
  }
}