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

时间:2022-10-26 22:28:26
列表视图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);

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

模拟数据 展示ListView

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

------------------------一---起分享,一起进步!需要你们

React-Native基础_5.列表视图ListView的更多相关文章

  1. React-Native基础&lowbar;5&period;列表视图ListView 网络数据展示

    //获取网络数据 并用列表展示 豆瓣Top250 api /** * Sample React Native App * https://github.com/facebook/react-nativ ...

  2. React Native基础&amp&semi;入门教程:初步使用Flexbox布局

    在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...

  3. react native基础与入门

    react native基础与入门 一.react native 的优点 1.跨平台(一才两用) 2.低投入高回报 (开发成本低.代码复用率高) 3.性能高:拥有独立的js渲染引擎,比传统的h5+ w ...

  4. 跨平台框架与React Native基础

    跨平台框架 什么是跨平台框架? 这里的多个平台一般是指 iOS 和 Android . 为什么需要跨平台框架? 目前,移动开发技术主要分为原生开发和跨平台开发两种.其中,原生应用是指在某个特定的移动平 ...

  5. React Native填坑之旅--ListView篇

    列表显示数据,基本什么应用都是必须.今天就来从浅到深的看看React Native的ListView怎么使用.笔者写作的时候RN版本是0.34. 最简单的 //@flow import React f ...

  6. Android 自学之列表视图ListView和ListActivity

    ListView是手机系统中使用非常广泛的一种组件,它以垂直列表的形式显示所有列表项. 创建ListView有两种方式: 直接使用ListView创建. 让Activity继承ListActivity ...

  7. Android——列表视图&lpar;ListView&rpar;

    列表视图是android中最常用的一种视图组件,它以垂直列表的形式列出需要显示的列表项.在android中有两种方法向屏幕中添加列表视图:一种是直接使用ListView组件创建:另外一种是让Activ ...

  8. 滚动视图、列表视图&lbrack;ListView、SimpleAdapter类&rsqb;

    滚动视图 <ScrollView android: layout_width="fill_parent" android: layout_height="fill_ ...

  9. React Native基础&amp&semi;入门教程:调试React Native应用的一小步

    React Native(以下简称RN)为传统前端开发者打开了一扇新的大门.其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一. 试想一下,当你在手机屏幕按下一个按钮, ...

随机推荐

  1. 如何判断js中的数据类型?

    js六大数据类型:number.string.object.Boolean.null.undefined string: 由单引号或双引号来说明,如"string" number: ...

  2. 初探JAVA中I&sol;O流&lpar;一&rpar;

    一.流 流,这里是对数据交换的形象称法.进程是运行在内存中的,在运行的过程中避免不了会与外界进行数据交互.比如将数据从硬盘.控制台.管道甚至是套接字(具体点应该是我们电脑上的网卡)读到我们进程锁所占据 ...

  3. 夺命雷公狗jquery---5可见选择器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. linux tar 命令 --致力于&OpenCurlyDoubleQuote;一眼看懂,随手就用”的随笔

    基本玩法: 压缩: tar -czf txt.tar.gz *.txt // 将当前目录下的所有txt文件,创建一个tar包,并用gzip算法,压缩成txt.tar.gz 文件 解压: tar -xz ...

  5. 提高查询速度:SQL Server数据库优化方案

    查询速度慢的原因很多,常见如下几种: 1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2.I/O吞吐量小,形成了瓶颈效应. 3.没有创建计算列导致查询不优化. 4.内存不足 ...

  6. java中修饰符及其用法

    1. java中的修饰符 a. 权限修饰符 private,默认的,protected,public b. 状态修饰符 static,final c. 抽象修饰符 abstract 2. 类修饰符 p ...

  7. kNN算法个人理解

    新手,有问题的地方请大家指教 训练集的数据有属性和标签 同类即同标签的数据在属性值方面一定具有某种相似的地方,用距离来描述这种相似的程度 k=1或则较小值的话,分类对于特殊数据或者是噪点就会异常敏感, ...

  8. 带你精读你不知道的Javasript&lpar;上&rpar;(一)

    斌果在这几天看了下你不知道的js这本书,这本书讲的东西还是挺不错的,其中有很多平时我压根没接触到的概念和方法.借此也可以丰富一下我对js的了解. 第一部分 第一章 作用域是什么? 1.程序中一点源代码 ...

  9. 在java程序代码中打开文件

    class     TEST {      public  static  void  main(String[]  args){        System.out.println("He ...

  10. linux &sol;Android 平台下使用 i2c-tools

    下载源码将 i2c-tools 代码下载到 Android 源码的 external 目录下 在 i2c-tools 目录下新建 Android.mk 文件,内容如下: # external/i2c- ...