React Native之ScrollView & FlatList & SectionList

---

ScrollView

类似我们Android中的ScrollView,包含在其里面的控件可以横向或竖向滚动。
示例代码：

import React, {Component} from 'react'

import {
    StyleSheet,
    ScrollView,
    Text,
    Image,
    View
} from 'react-native'



export default class UselessTextInputMultiline extends Component{
    static navigationOptions = {
        // title: 'page 1',
        title: 'ScrollView',
    };

    render() {
        return (
            
                
                    霍建华
                    
                    
                    胡歌
                    
                    
                    吴磊
                    
                    
                    杨紫
                    
                    
                
            
        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        alignItems:'center',
        justifyContent: 'center'
    },

    image:{
        marginBottom: 10
    },
    text:{
        fontSize: 48,
        alignItems:'center'
    }
})

效果图：

scrollview

ScrollView的几个常用属性：

• showsVerticalScrollIndicator：true|false，表示是否显示垂直滚动条；
• horizontal：true|false，表示滚动方向，true表示横向滚动，false表示竖向滚动。

FlatList

类似Android中的ListView或RecyclerView。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是data和renderItem,data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。
示例代码：

import React, {Component} from 'react'

import {
    StyleSheet,
    ScrollView,
    Text,
    Image,
    View,
    FlatList
} from 'react-native'


export default class UselessTextInputMultiline extends Component {
    static navigationOptions = {
        title: 'FlatList',
    };

    render() {
        return (
            
                 
                } data={[
                    {key: 'http://img.idol001.com/origin/2015/11/05/7007c0a48bd5fbef9f14c4c0c04e6c221446694136.jpg'},
                    {key: 'http://img.idol001.com/origin/2015/11/05/7007c0a48bd5fbef9f14c4c0c04e6c221446694136.jpg'},
                    {key: 'http://c.hiphotos.baidu.com/baike/pic/item/d009b3de9c82d158b62f49ef890a19d8bc3e423a.jpg'},
                    {key: 'http://c.hiphotos.baidu.com/baike/pic/item/d009b3de9c82d158b62f49ef890a19d8bc3e423a.jpg'},
                    {key: 'http://uploads.5068.com/allimg/1802/8580-1P22Q01Q4.jpg'},
                    {key: 'http://uploads.5068.com/allimg/1802/8580-1P22Q01Q4.jpg'},
                    {key: 'http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg'},
                    {key: 'http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg'},
                ]} />
            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 20
    },

    image: {
        marginBottom: 10
    },
    text: {
        fontSize: 48,
        alignItems: 'center'
    }
})

效果图

flatlist

SectionList

便于渲染一些需要分组的数据。
示例代码：

import React, {Component} from 'react'

import {
    StyleSheet,
    ScrollView,
    Text,
    Image,
    View,
    SectionList,

} from 'react-native'


export default class UselessTextInputMultiline extends Component {
    static navigationOptions = {
        title: 'FlatList',
    };

    render() {
        return (
            
                 
                    
                        
                    } 
                    renderSectionHeader={({section}) => {section.title}}

                    keyExtractor={(item, index) => index}
                />
            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 10
    },

    image: {
        marginBottom: 10
    },
    text: {
        fontSize: 48,
        alignItems: 'center'
    },
    sectionHeader: {
        textAlign: 'center',
        paddingTop: 2,
        paddingBottom: 2,
        paddingLeft: 10,
        paddingRight: 10,
        marginBottom: 10,
        fontSize: 24,
        color: "#fff",
        backgroundColor: '#28d3ff'
    }
})

效果图：

SectionList