本章节主要介绍

• FlatList
• SectionList
• 网络相关

FlatList

• 垂直滚动列表
• 优先渲染屏幕上显示的元素
• 必须的两个参数data和renderItem

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

export default class FlatListBasics extends Component {

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

    render() {
        let data = [{
            key: 'Devin'
        }, {
            key: 'Jackson'
        }, {
            key: 'James'
        }, {
            key: 'Joel'
        }, {
            key: 'John'
        }, {
            key: 'Jillian'
        }, {
            key: 'Jimmy'
        }, {
            key: 'Julie'
        }]
        return (
            <View style={ styles.container }>
                <FlatList data={ data } renderItem={ this.renderItem } />
            </View>
            );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
})

FlatList

SectionList

如果需要渲染分组数据，并且带分组标签，可以使用SectionList

import React, { Component } from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';

export default class SectionListBasics extends Component {

    renderItem({item}) {
        return (
            <Text style={ styles.item }>
                { item }
            </Text>
            );
    }

    renderSectionHeader({section}) {
        return (
            <Text style={ styles.sectionHeader }>
                { section.title }
            </Text>
            );
    }

    render() {

        let data = [{
            title: 'D',
            data: ['Devin']
        }, {
            title: 'J',
            data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']
        },]

        return (
            <View style={ styles.container }>
                <SectionList
                    sections={ data }
                    renderItem={ this.renderItem }
                    renderSectionHeader={ this.renderSectionHeader }
                    keyExtractor={ (item, index) => index } />
            </View>
            );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
})

网络相关

最简单的get请求

fetch(url);

修改请求方法、Headers、Body

fetch(url, {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

fetch方法是一个异步方法，返回一个Promise。

import React from 'react';
import { FlatList, ActivityIndicator, Text, View } from 'react-native';

export default class SectionListBasics extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true
        }
    }

    getMoviesFromApiAsync() {
        return fetch('https://facebook.github.io/react-native/movies.json')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseJson.movies
                })
            })
            .catch((error) => {
                console.error(error);
            });
    }

    componentDidMount() {
        return this.getMoviesFromApiAsync();
    }

    renderItem({item}) {
        return ( <Text>
                     { item.title },
                     { item.releaseYear }
                 </Text> );
    }

    render() {

        if (this.state.isLoading) {
            return (
                <View style={ { flex: 1, padding: 20 } }>
                    <ActivityIndicator/>
                </View>
                );
        }

        return (
            <View style={ { flex: 1, paddingTop: 20 } }>
                <FlatList data={ this.state.dataSource } renderItem={ this.renderItem } keyExtractor={ (item, index) => item.id } />
            </View>
            );
    }
}