ReactNative官网例子练习——（二）

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