代码示例
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @ListVew九宫格布局
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ListView,
TouchableOpacity,
ActivityIndicator
} from 'react-native';
// 模拟豆瓣图书Api
const URL = 'https://api.douban.com/v2/book/search?count=20&q=余秋雨';
// 计算左侧的外边距,使其居中显示
import Dimensions from 'Dimensions';
const {width,height} = Dimensions.get('window');
const cols = 3;
const boxW = 80;
const wMargin = Number.parseInt((width - cols*boxW) / (cols+1));
const hMargin = 25;
export default class Main extends Component {
constructor(props){
super(props);
this.state = {
dataSource: null,
isLoaded:false
};
}
componentDidMount(){
this.fetchData();
}
fetchData(){
fetch(URL)
.then((response) => response.json())
.then((data) => {
let dataList = data.books;
this.setState({
dataSource:new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(dataList),
isLoaded:true
})
})
.catch((err) => {
console.log(err);
this.setState({
dataSource: null,
isLoaded:false
})
})
.done()
}
render() {
return (
<View style={{flex:1,backgroundColor:'#fff'}}>
<View style={styles.headerContainer}>
<Text style={styles.headerTxt}>杂志列表</Text>
</View>
{
this.state.isLoaded ?
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData)=>this._renderRow(rowData)}
contentContainerStyle={styles.listViewStyle}
/> :
<View style={styles.indicatorStyle}>
<ActivityIndicator size='large' color='#398DEE'/>
</View>
}
</View>
);
}
// 注意TouchableOpacity和内层View容器的样式
_renderRow(rowData){
return (
<TouchableOpacity style={styles.wrapStyle} activeOpacity={0.5} onPress={()=>alert(rowData.title)}>
<View style={styles.innerView}>
<Image source={{uri:rowData.images.medium}} style={styles.imgView} />
<Text style={{color:'gray'}}>{rowData.pubdate}</Text>
</View>
</TouchableOpacity>
)
}
}
const styles = StyleSheet.create({
headerContainer:{
height:30,
backgroundColor:'#398DEE',
justifyContent:'center',
alignItems:'center'
},
headerTxt:{
color:'#fff',
fontSize:14,
},
indicatorStyle:{
marginTop:30,
justifyContent:'center',
alignItems:'center'
},
listViewStyle:{
// 改变主轴的方向
flexDirection:'row',
// 多行显示
flexWrap:'wrap',
// 侧轴方向
alignItems:'center', // 必须设置,否则换行不起作用
},
wrapStyle:{
width:80,
height:100,
marginLeft:wMargin,
marginTop:hMargin,
},
innerView:{
width:80,
height:100,
alignItems:'center',
justifyContent:'center'
},
imgView:{
width:61,
height:72
}
});
效果图
九宫格.png
网友评论