react-native 列表组件

react-native原有的listview因为性能的原因，逐步被SectionList和FlatList替换。 今天所有的演示的代码均可以通过进行下载 ##生成一个Demo App 在进行学习之前我们需要通过React Native CLI来生成一个名为ListViewDemo的项目 首先我们需要安装CLI

npm install -g react-native-clireact-native init ListViewDemocd ListViewDemo

设置模拟数据

为了正真实的展示效果，我们抓取了网上的真实数据来进行模拟。因为数据量过大的原因，不在此页面展示，可以通过git进行下载。 获取数据

const BabyNameData = require('../data.json')let instance = nullexport default class BabyNameApi {    //单例    constructor() {        if (instance) {            instance = this        }        return instance    }    getAllNames() {        let names = []        BabyNameData.data.map((row) => {            if (names.indexOf(row[10].toUpperCase()) < 0) {                names.push(row[10].toUpperCase())            }        })        return names.map((name) => { return { key: name } });    }    getAllNamesByYears(){        let results={}        let years=[]        BabyNameData.data.map((row) => {            if (years.indexOf(row[9]) < 0) {                years.push(row[9])            }        })        years.map((year) => {            results[year] = BabyNameData.data.filter((row) => { return row[9] === year })            results[year] = results[year].map((row) => { return { key: row[10].toUpperCase() } })        })         return years.map((year)=>{            return { title: year, data: results[year] }        })    }}

Flastlist

该组件仅简单的列表形式进行数据的展示

App.js

import React from 'react'import { StyleSheet, Text, View, FlatList } from 'react-native' import BabyNameApi from './api/babyNameApi' export default class App extends React.Component {  constructor(props) {    super(props)     this.babyNameApi = new BabyNameApi()    this.state = {      names: this.babyNameApi.getAllNames(),      namesByYear: this.babyNameApi.getAllNamesByYears()    }  }   render() {    return (      
            
      
      
       {item.key}
      }        />      
     
        )  }} const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',    paddingTop: 20,  },})


上面仅展示了最基础的列表，我们可以通过设置一些简单的样式，使其看上去更加的美观。

render() {    return (      
            
      
      
       {item.key}
      }        />      
     
        )  }} const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',    paddingTop: 20,  },  row: {    padding: 10,    borderWidth: .5,    borderColor: 'black',    height: 50,    fontSize: 18,  }})

我们可以通过下面的两个事件进行相应的交互

• onPress 点击事件
• onLongPress 长按事件

import { StyleSheet, Text, View, FlatList, Alert } from 'react-native'...  render() {    return (      
            
                   
      
        Alert.alert(item.key + ' pressed!')}                onLongPress={() => Alert.alert(item.key + ' long pressed!')}                style={styles.row}>                {item.key}              
      }        />      
     
        )  }...

SectionList

SectionList不仅能够展示列表，还可以显示带有标题的列表。

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  Platform,  StyleSheet,  Text,  View,  SectionList,  FlatList,  Alert,  RefreshControl} from 'react-native';import BabyNameApi from './api/babyNameApi';export default class App extends Component<{}> {  constructor(props){    super(props);    this.BabyNameApi=new BabyNameApi();    this.state={      names:this.BabyNameApi.getAllNames(),      namesByYear:this.BabyNameApi.getAllNamesByYears(),      refreshing:false    }  }  render() {    return (      
            
     
      
       {                this.setState({refreshing:true})                setTimeout(() => {                  this.setState({refreshing:false})                }, 2000);              }}              />          }          sections={this.state.namesByYear}          renderItem={({item}) => 
       
        {item.key}
       }          renderSectionHeader={({section}) => 
       
        {section.title}
       }        />      
      
     
        );  }}const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',    paddingTop: 20,  },  row: {    padding: 10,    borderWidth: .5,    borderColor: 'black',    height: 50,    fontSize: 18,  },  header: {    padding: 12,    backgroundColor: 'gray',    fontSize: 36,    fontWeight: 'bold',    height: 60  }});

 

下面的代码主要的功能是渲染头部的部分 sections:表示用来渲染的数据 renderSectionHeader:每个section的头部渲染的内容

sections={this.state.namesByYear}  renderSectionHeader=  {({section}) =>   
    
       {section.title}  
    }

列表项渲染的内容

renderItem={({item}) =>
    
     {item.key}
    }

下拉刷新 refreshing:是否在下拉的时候显示加载的服务 onRefresh：下拉时会触发的事件，简单通过setTimeout来让其二秒后自动消失 

    
     {    this.setState({refreshing:true})                setTimeout(() => {                this.setState({refreshing:false})                }, 2000);              }}              />          }