ListView

基于react-native的FlatList的封装

注：暂时不要声明自troila-mobile-ui，优先声明自本地的components/theme中

规则

• 支持mock来处理渲染
• 统一添加了RefreshControl用来刷新效果
• 支持上拉加载，下拉刷新
• api简洁高效
• 注：请求封装已完成，使用中有问题请随时沟通

Example

iOS	Android

Code

import React, { Component } from 'react';
import { Text } from 'react-native';
import { ListView } from 'troila-mobile-ui';



class ListViewInANest extends Component {
  render() {
    if(mock){
      return (
        <ListView
          mockData={[
              {
                  id:1,
                  text: 1,
              }, {
                  id: 2,
                  text: 2,
              }, {
                  id: 3,
                  text: 3,
              }
          ]}
          keyExtractor={(e)=>`${e.id}`}
          renderItem={({ item})=>{
              return <Text>{item.text} testData</Text>
          }}
        />
      )
    }else{
      return (
        <ListView
          apiName={'LISTGETALIVEMACHLISTWITHPAGEANDINTEGRATE'}
          fetchParams={{realName:'xxx'}}
          numColumns={2}
          keyExtractor={(e) => `${e.funcId}`}
          renderItem={this.renderItem}
          ref={(e)=>this.ListView=e}
        />
      )
    }
  }
  testFunc = ()=>{
    this.ListView.setFetchParams({
        id: 1
    })
  }
}

Props

属性	说明	类型	默认值
apiName	请求接口的标识，同request的apiName一致	String	null
fetchParams	请求参数(注：默认配置分页参数，不需要手动添加)	Object	{}
listEmptyComponent	空数据的展示组件	Element	View
getNativeData	获取请求返回的数据	Function	()=>{}
onRefresh	下拉刷新触发	Function	()=>{}
onEndReached	上拉加载触发	Function	()=>{}
contentContainerStyle	容器样式	Style	{}
style	最外层样式	Style	{}
changeDataStructurese	改变数据源	Functon	()=>{}
mockData	mock数据	Array	null
renderItem	渲染cell	Function	null
keyExtractor	指定key	Function	null
closeRefreshing	关闭下拉刷新	Boolean	false
other props	FlatList props

Methods

setFetchParams()

this.ListView.setFetchParams({
  id: 1
})

设置参数重新请求

---

manuallyRefresh()

this.ListView.manuallyRefresh()

主动刷新

更多 react-native FlatList 属性请参考 react-native FlatList (http://facebook.github.io/react-native/docs/flatlist.html)