ReactNative官网例子练习——(二)
2016-12-12 11:22
344 查看
ScrollView是一个通用的可滚动的容器,你可以在其中放入多个组件和视图,而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置)。
ListView组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同。
ListView更适于长列表数据,且元素个数可以增删。和ScrollView不同的是,ListView并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。
ListView组件必须的两个属性是dataSource和renderRow。dataSource是列表的数据源,而renderRow则逐个解析数据源中的数据,然后返回一个设定好格式的组件来渲染。
记得以前写Andorid程序的时候ScrollView和ListView嵌套的时候会后很多问题 ListView显示不全等。下面的例子竖直的ScrollView中嵌套了一个水平的ScrollView还嵌套了一个ListView 代码非常简洁。
在项目的根目录新建一个img的文件夹。然后放入一张测试图片 favicon.png
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
竖直的ScrollView + 横向的ScrollView +ListView
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);1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
竖直的ScrollView + 横向的ScrollView +ListView
相关文章推荐
- ReactNative官网例子练习(五)——页面跳转传参
- ReactNative官网例子练习——(一)
- ReactNative官网例子练习(三)——请求网络
- React Native-4.React Native布局属性练习之flexBox模型实战
- ReactNative官网例子练习——(一)
- 用文章和视频的app例子简介React-Native
- ReactNative官网例子练习——(一)
- ReactNative官网例子练习(四)——页面跳转
- React Native-3.React Native中的主要布局属性介绍和练习
- ReactNative官网例子练习(三)——请求网络
- 对Communication between native and React Native官方例子的纠正
- ReactNative官网例子练习(四)——页面跳转
- React-Native -课后练习
- ReactNative官网例子练习(五)——页面跳转传参
- ReactNative官网例子练习——(二)
- 运行React-Native例子UIExplorer
- React Native基础&入门教程:以一个To Do List小例子,看props和state
- React Native运行官方例子----组件集合
- React Native基础&入门教程:以一个To Do List小例子,看props和state