ReactNative官网例子练习——(二)

原创 2016年08月31日 16:12:20

ScrollView是一个通用的可滚动的容器,你可以在其中放入多个组件和视图,而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置)。
ListView组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同。

ListView更适于长列表数据,且元素个数可以增删。和ScrollView不同的是,ListView并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。

ListView组件必须的两个属性是dataSource和renderRow。dataSource是列表的数据源,而renderRow则逐个解析数据源中的数据,然后返回一个设定好格式的组件来渲染。

记得以前写Andorid程序的时候ScrollView和ListView嵌套的时候会后很多问题 ListView显示不全等。下面的例子竖直的ScrollView中嵌套了一个水平的ScrollView还嵌套了一个ListView 代码非常简洁。

在项目的根目录新建一个img的文件夹。然后放入一张测试图片 favicon.png

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  ScrollView,
  Image,
  ListView,
} from 'react-native';

class RnWidget extends Component {
   constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2 })
    this.state = {
      dataSource: ds.cloneWithRows(['John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'])
    };
  }
  render() {
    return (

     <ScrollView>
          <Text style={{fontSize:30}}>Scroll me plz</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:30}}>If you like</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
           <ScrollView horizontal ={true}>
           <Text style={{fontSize:30}}>Scroll me plz</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:30}}>If you like</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
           </ScrollView>
          <Text style={{fontSize:30}}>React Native</Text>
           <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
        </ScrollView>
    );
  }
}
AppRegistry.registerComponent('RnWidget', () => RnWidget);

竖直的ScrollView + 横向的ScrollView +ListView
效果图

版权声明:本文为博主原创文章,未经博主允许不得转载。

浅析Java遍历器(Iterator)的实现

遍历器用于遍历Collection, Map没有提供public的遍历器,但是其内部定义了几个private遍历器自用。简单地说,每个AbstratCollection的子类都有一个iterator(...

深入理解React中的上下文this

写在前面JavaScript中的作用域scope 和上下文 context 是这门语言的独到之处,每个函数有不同的变量上下文和作用域。这些概念是JavaScript中一些强大的设计模式的后盾。在ES5...

ReactNative官网例子练习——(二)

ScrollView是一个通用的可滚动的容器,你可以在其中放入多个组件和视图,而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置)。...

ReactNative官网例子练习(五)——页面跳转传参

上一篇文章练习了Rn中使用Navigator跳转页面。我们一个完成的应用中一般不仅仅是跳转页面,经常还会传一些参数到下一个界面。Rn中怎么实现传参呢?  例子代码: /** * Sample Rea...

ReactNative官网例子练习(五)——页面跳转传参

上一篇文章练习了Rn中使用Navigator跳转页面。我们一个完成的应用中一般不仅仅是跳转页面,经常还会传一些参数到下一个界面。Rn中怎么实现传参呢? 例子代码:/** * Sample Reac...

ReactNative官网例子练习(四)——页面跳转

开发一个应用,基本会有很多个页面,就像我们开发Android原生应用的时候,多个Activity 多个Fragment之间跳转 ,Rn中是怎么跳转的呢?答案就是通过导航器Navigator。 例子代...

ReactNative官网例子练习(三)——请求网络

要想完成一个APP,网络请求获取后台的数据基本上是必须的。无论是咋Android中还是在iOS中都是非常重要的部分ReactNative中当然也不例外。  React Native提供了和web标准一...

ReactNative官网例子练习——(一)

学一个变成语言,一般我们都先完成一个hellowrold。这就不写了,然后根据Rn官网的顺序 我们需要了解 Props(属性)和State(状态)         Props 属性用于定制一些必要的...

FastCGI的并发处理——官网threaded例子

http://andylin02.iteye.com/blog/650609 我还没找到异步处理的方式。如果有异步的实现方式,那就可以单线程异步处理多个并发请求了。 不过我在FastCGI的sa...
  • bytxl
  • bytxl
  • 2012年12月14日 10:35
  • 1188

sourcegrid 应用实例(全部来自官网下载的例子)——Planning grid

 源码:using System;using System.Drawing;using System.Collections;using System.ComponentModel;using Sys...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ReactNative官网例子练习——(二)
举报原因:
原因补充:

(最多只允许输入30个字)