---

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 (
            <ScrollView>
                <View style={styles.container}>
                    <Text style={styles.text}>霍建华</Text>
                    <Image style={styles.image} source={{uri: "http://img.idol001.com/origin/2015/11/05/7007c0a48bd5fbef9f14c4c0c04e6c221446694136.jpg", width: 200, height: 200}} />
                    <Image style={styles.image} source={{uri: "http://img.idol001.com/origin/2015/11/05/7007c0a48bd5fbef9f14c4c0c04e6c221446694136.jpg", width: 200, height: 200}} />
                    <Text style={styles.text}>胡歌</Text>
                    <Image style={styles.image} source={{uri: "http://c.hiphotos.baidu.com/baike/pic/item/d009b3de9c82d158b62f49ef890a19d8bc3e423a.jpg", width: 200, height: 200}} />
                    <Image style={styles.image} source={{uri: "http://c.hiphotos.baidu.com/baike/pic/item/d009b3de9c82d158b62f49ef890a19d8bc3e423a.jpg", width: 200, height: 200}} />
                    <Text style={styles.text}>吴磊</Text>
                    <Image style={styles.image} source={{uri: "http://uploads.5068.com/allimg/1802/8580-1P22Q01Q4.jpg", width: 200, height: 200}} />
                    <Image style={styles.image} source={{uri: "http://uploads.5068.com/allimg/1802/8580-1P22Q01Q4.jpg", width: 200, height: 200}} />
                    <Text style={styles.text}>杨紫</Text>
                    <Image style={styles.image} source={{uri: "http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg", width: 200, height: 200}} />
                    <Image style={styles.image} source={{uri: "http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg", width: 200, height: 200}} />
                </View>
            </ScrollView>
        );
    }
}

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 (
            <View style={styles.container}>
                <FlatList  renderItem={({item}) => <Image style={styles.image}
                                                         source={{uri: item.key, width: 200, height: 200}}/>
                } 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'},
                ]} />
            </View>
        );
    }
}

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 (
            <View style={styles.container}>
                <SectionList sections={[
                    {
                        title: '霍建华',
                        data: ['http://img.idol001.com/origin/2015/11/05/7007c0a48bd5fbef9f14c4c0c04e6c221446694136.jpg']
                    },
                    {
                        title: '胡歌',
                        data: ['http://c.hiphotos.baidu.com/baike/pic/item/d009b3de9c82d158b62f49ef890a19d8bc3e423a.jpg', 'http://c.hiphotos.baidu.com/baike/pic/item/d009b3de9c82d158b62f49ef890a19d8bc3e423a.jpg']
                    },
                    {
                        title: '吴磊',
                        data: ['http://uploads.5068.com/allimg/1802/8580-1P22Q01Q4.jpg', 'http://uploads.5068.com/allimg/1802/8580-1P22Q01Q4.jpg', 'http://uploads.5068.com/allimg/1802/8580-1P22Q01Q4.jpg']
                    },
                    {
                        title: '杨紫',
                        data: ['http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg', 'http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg', 'http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg', 'http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg']
                    },
                ]} renderItem={({item}) => 
                    <View 
                        style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Image style={styles.image} 
                               source={{uri: item, width: 200, height: 200}}/>
                    </View>} 
                    renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}

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

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