ScrollView
类似我们Android中的ScrollView,包含在其里面的控件可以横向或竖向滚动。
示例代码：
import React, {Component} from 'react'
import {
StyleSheet,
ScrollView,
Text,
Image,
View
} from 'react-native'
export default class UselessTextInputMultiline extends Component{
static navigationOptions = {
// title: 'page 1',
title: 'ScrollView',
};
render() {
return (
<ScrollView>
<View style={styles.container}>
<Text style={styles.text}>霍建华</Text>
<Image style={styles.image} source={{uri: "http://img.idol001.com/origin/2015/11/05/7007c0a48bd5fbef9f14c4c0c04e6c221446694136.jpg", width: 200, height: 200}} />
<Image style={styles.image} source={{uri: "http://img.idol001.com/origin/2015/11/05/7007c0a48bd5fbef9f14c4c0c04e6c221446694136.jpg", width: 200, height: 200}} />
<Text style={styles.text}>胡歌</Text>
<Image style={styles.image} source={{uri: "http://c.hiphotos.baidu.com/baike/pic/item/d009b3de9c82d158b62f49ef890a19d8bc3e423a.jpg", width: 200, height: 200}} />
<Image style={styles.image} source={{uri: "http://c.hiphotos.baidu.com/baike/pic/item/d009b3de9c82d158b62f49ef890a19d8bc3e423a.jpg", width: 200, height: 200}} />
<Text style={styles.text}>吴磊</Text>
<Image style={styles.image} source={{uri: "http://uploads.5068.com/allimg/1802/8580-1P22Q01Q4.jpg", width: 200, height: 200}} />
<Image style={styles.image} source={{uri: "http://uploads.5068.com/allimg/1802/8580-1P22Q01Q4.jpg", width: 200, height: 200}} />
<Text style={styles.text}>杨紫</Text>
<Image style={styles.image} source={{uri: "http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg", width: 200, height: 200}} />
<Image style={styles.image} source={{uri: "http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg", width: 200, height: 200}} />
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container:{
flex:1,
alignItems:'center',
justifyContent: 'center'
},
image:{
marginBottom: 10
},
text:{
fontSize: 48,
alignItems:'center'
}
})
效果图：
scrollview
ScrollView的几个常用属性：
- showsVerticalScrollIndicator：true|false，表示是否显示垂直滚动条；
- horizontal：true|false，表示滚动方向，true表示横向滚动，false表示竖向滚动。
FlatList
类似Android中的ListView或RecyclerView。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是data和renderItem,data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。
示例代码：
import React, {Component} from 'react'
import {
StyleSheet,
ScrollView,
Text,
Image,
View,
FlatList
} from 'react-native'
export default class UselessTextInputMultiline extends Component {
static navigationOptions = {
title: 'FlatList',
};
render() {
return (
<View style={styles.container}>
<FlatList renderItem={({item}) => <Image style={styles.image}
source={{uri: item.key, width: 200, height: 200}}/>
} data={[
{key: 'http://img.idol001.com/origin/2015/11/05/7007c0a48bd5fbef9f14c4c0c04e6c221446694136.jpg'},
{key: 'http://img.idol001.com/origin/2015/11/05/7007c0a48bd5fbef9f14c4c0c04e6c221446694136.jpg'},
{key: 'http://c.hiphotos.baidu.com/baike/pic/item/d009b3de9c82d158b62f49ef890a19d8bc3e423a.jpg'},
{key: 'http://c.hiphotos.baidu.com/baike/pic/item/d009b3de9c82d158b62f49ef890a19d8bc3e423a.jpg'},
{key: 'http://uploads.5068.com/allimg/1802/8580-1P22Q01Q4.jpg'},
{key: 'http://uploads.5068.com/allimg/1802/8580-1P22Q01Q4.jpg'},
{key: 'http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg'},
{key: 'http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg'},
]} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20
},
image: {
marginBottom: 10
},
text: {
fontSize: 48,
alignItems: 'center'
}
})
效果图
flatlist
SectionList
便于渲染一些需要分组的数据。
示例代码：
import React, {Component} from 'react'
import {
StyleSheet,
ScrollView,
Text,
Image,
View,
SectionList,
} from 'react-native'
export default class UselessTextInputMultiline extends Component {
static navigationOptions = {
title: 'FlatList',
};
render() {
return (
<View style={styles.container}>
<SectionList sections={[
{
title: '霍建华',
data: ['http://img.idol001.com/origin/2015/11/05/7007c0a48bd5fbef9f14c4c0c04e6c221446694136.jpg']
},
{
title: '胡歌',
data: ['http://c.hiphotos.baidu.com/baike/pic/item/d009b3de9c82d158b62f49ef890a19d8bc3e423a.jpg', 'http://c.hiphotos.baidu.com/baike/pic/item/d009b3de9c82d158b62f49ef890a19d8bc3e423a.jpg']
},
{
title: '吴磊',
data: ['http://uploads.5068.com/allimg/1802/8580-1P22Q01Q4.jpg', 'http://uploads.5068.com/allimg/1802/8580-1P22Q01Q4.jpg', 'http://uploads.5068.com/allimg/1802/8580-1P22Q01Q4.jpg']
},
{
title: '杨紫',
data: ['http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg', 'http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg', 'http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg', 'http://s9.rr.itc.cn/r/wapChange/20173_23_16/a0tuv71645962601082.jpg']
},
]} renderItem={({item}) =>
<View
style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Image style={styles.image}
source={{uri: item, width: 200, height: 200}}/>
</View>}
renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
keyExtractor={(item, index) => index}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 10
},
image: {
marginBottom: 10
},
text: {
fontSize: 48,
alignItems: 'center'
},
sectionHeader: {
textAlign: 'center',
paddingTop: 2,
paddingBottom: 2,
paddingLeft: 10,
paddingRight: 10,
marginBottom: 10,
fontSize: 24,
color: "#fff",
backgroundColor: '#28d3ff'
}
})
效果图：
SectionList
