react-native 列表组件的简单学习

2019独角兽企业重金招聘Python工程师标准>>>

react-native 列表组件

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

npm install -g react-native-cli

react-native init ListViewDemo
cd ListViewDemo

设置模拟数据

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

const BabyNameData = require('../data.json')
let instance = null

export 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 (
      <View style={styles.container}>
        <FlatList
          data={this.state.names}
          renderItem={({item}) => <Text>{item.key}</Text>}
        />
      </View>
    )
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: 20,
  },
})


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

render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.names}
          renderItem={({item}) => <Text style={styles.row}>{item.key}</Text>}
        />
      </View>
    )
  }
}
 
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 (
      <View style={styles.container}>
        <FlatList
          data={this.state.names}
          renderItem={({item}) =>
              <Text
                onPress={() => Alert.alert(item.key + ' pressed!')}
                onLongPress={() => Alert.alert(item.key + ' long pressed!')}
                style={styles.row}>
                {item.key}
              </Text>}
        />
      </View>
    )
  }
...

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 (
      <View style={styles.container}>
        <SectionList
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={()=>{
                this.setState({refreshing:true})
                setTimeout(() => {
                  this.setState({refreshing:false})
                }, 2000);
              }}
              />
          }
          sections={this.state.namesByYear}
          renderItem={({item}) => <Text style={styles.row}>{item.key}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.header}>{section.title}</Text>}
        />
      </View>
    );
  }
}

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}) => 
  <Text style={styles.header}>
  {section.title}
  </Text>}

列表项渲染的内容

renderItem={({item}) =>
<Text style={styles.row}>
{item.key}
</Text>}

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

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

转载于:https://my.oschina.net/u/215677/blog/1605361