美文网首页RN
React-native ListView九宫格布局

React-native ListView九宫格布局

作者: 随遇而安_2750 | 来源:发表于2017-04-10 17:49 被阅读65次

    代码示例

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

    相关文章

      网友评论

        本文标题:React-native ListView九宫格布局

        本文链接:https://www.haomeiwen.com/subject/fofeattx.html