react-native 列表組件的簡單學習

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);
              }}
              />
          }