React-native ListView九宫格布局

代码示例

/**
 * 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