React-Native基础_5.列表视图ListView

列表视图ListView
用来显示垂直滚动列表，需要指定两个东西，1 数据的来源 dataSource,2 渲染列表的条目布局 rendRow
'use strict'
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Image,
    View,
    ListView,
} from 'react-native';
//import {AppRegistry,} from 'react-native';
//import Day0718 from './componets/Home'

export default class Day0718 extends Component {
    constructor(props) {
        super(props);
        let movies = [
            {title: '肖申克的救赎'},
            {title: '这个杀手不太冷'},
            {title: '阿甘正传'},
            {title: '霸王别姬'},
            {title: '美丽人生'},
        ];

        let dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            movies: dataSource.cloneWithRows(movies)
        };
    }

    render() {
        return (
            <View style={styles.Container}>
                <ListView
                    dataSource={this.state.movies}
                    renderRow={
                        movie => <Text style={styles.itemText}>{movie.title} </Text>
                    }
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    overlay: {
        backgroundColor: 'rgba(0,0,0,0.3)',
        alignItems: 'center'
    },
    overlayHeader: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#eae7ff',
        padding: 10
    },
    overlaySubHeader: {
        fontSize: 16,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#eae7ff',
        padding: 10,
        paddingTop: 0,
    },
    backImage: {
        // alignItems:'center',
        flex: 1,
        //justifyContent:'center',
        resizeMode: 'cover',
    },
    image: {

        height: 200,
        width: 100,
        justifyContent: 'center',
    },
    item: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#6435c9',
        margin: 6,
        flex: 1,
    },
    itemOne: {
        //  alignSelf:'flex-start',
    },
    itemTwo: {
        //alignSelf:'center',
    },
    itemThree: {
        flex: 2,
    },
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    Container: {

        //alignItems:'flex-start',// flex-start 靠在左边显示 center 居中 flex-end 尾部
        //
        flexDirection: 'column',//row column 方向
        backgroundColor: '#eae7ff',
        flex: 1,
        //justifyContent:'center',//center ; 居中  flex-end 位于底部  space-between/space-around屏幕平均分配
    },
    Text: {
        color: '#6435c9',
        fontSize: 26,
        textAlign: 'center',
        fontStyle: 'italic',
        letterSpacing: 2,
        lineHeight: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '300',
        textDecorationLine: 'underline',
        textDecorationStyle: 'dashed',
    },

});

class ComText extends React.Component {
    render() {
        return (
            <Text style={styles.itemText}>
                {this.props.children}
            </Text>
        );
    }
}

AppRegistry.registerComponent('Day0718', () => Day0718);

模拟数据 展示ListView

-----------------------------期待大神们的到来

------------------------一---起分享，一起进步！需要你们