ListView 九宫格布局实现

1.效果图

2.数据

SettingData.json

{
    "data": [{
        "icon":"setting",
        "title":"设置"
    },{
        "icon":"setting",
        "title":"设置"
    },{
        "icon":"setting",
        "title":"设置"
    },{
        "icon":"setting",
        "title":"设置"
    },{
        "icon":"setting",
        "title":"设置"
    },{
        "icon":"setting",
        "title":"设置"
    }]
}

　　

3.组件代码

/**
 * 设置
 * 九宫格布局
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    Dimensions,
    TouchableOpacity,
    ToastAndroid,
    BackAndroid,
    AsyncStorage,
} from 'react-native';

import PropTypes from 'prop-types';

// 获取屏幕宽高
const {width, height} = Dimensions.get('window');

// 引入 自定义导航栏组件
import CommunalNavBar from '../../components/CommunalNavBar';
// 引入 菜单数据
import SettingData from './SettingData.json';

import Prompt from 'react-native-prompt';

//常量设置
let cols = 3;
let cellWH = 100;
let vMargin = (width-cellWH*cols)/(cols+1);
let hMargin = 20;
 
export default class Setting extends Component {

    constructor(props){
        super(props);
        //1.设置数据源
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        //2.设置返回数据
        this.state = {
            dataSource:ds.cloneWithRows(SettingData.data),
            isShow:false,
            message:'',
        };
        that = this;
    }

    // 返回中间按钮
    renderTitleItem() {
        return(
            <Text style={styles.navbarTitleItemStyle}>设置</Text>
        );
    }


    render(){
        return(
            <View style={styles.container}>
                {/* 导航栏样式 */}
                <CommunalNavBar
                    titleItem = {() => this.renderTitleItem()}
                />

                {/* 九宫格 */}
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this._renderRow}
                    contentContainerStyle={styles.listViewStyle}
                />

                <Prompt  
                    visible={this.state.isShow}  
                    title={'提示:'}  
                    placeholder={'请输入IP地址!'}  
                    onCancel ={  
                        () => {  
                              this.setState({  
                                isShow:false  
                            });  
                        }  
                    }  
                    onSubmit={  
                        (new_value) => {  
                            this.setState({  
                                isShow:false,  
                                message:new_value  
                            });
                            if(!new_value){
                                new_value = 'http://14.127.188.40:8848';
                            }

                            // 保存 IP
                            AsyncStorage.setItem('LoginIP',new_value);

                            ToastAndroid.show('保存成功,请重新登录!',ToastAndroid.SHORT);
                            // 关闭程序
                            BackAndroid.exitApp();
                        }  
                    }  
                    cancelText={'取消'}  
                    submitText={'提交'}
                />
            </View>
        );
    }

    _renderRow(rowData, sectionID, rowID, highlightRow){
        return(
            <TouchableOpacity activeOpacity={0.5} onPress={()=>{that._onPress(rowData.title)}}>
                <View style={styles.innerViewStyle}>
                    <Image source={{uri:rowData.icon}} style={styles.iconStyle}/>
                    <Text style={styles.txtStyle}>{rowData.title}</Text>
                </View>
            </TouchableOpacity>
        );
    }

    _onPress(e) {
        this.setState({
            isShow:true
        });
    }  

}
 
const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:'#fff',
    },
    navbarTitleItemStyle: {
        fontSize:17,
        color:'#fff',
    },

    listViewStyle:{
        flexDirection:'row',
        flexWrap:'wrap',
    },
    iconStyle:{
        30,
        height:30,
        marginBottom:10,
    },
    txtStyle:{
        color:'#1296DB',
    },

    innerViewStyle:{
        cellWH,
        height:cellWH,
        marginLeft:vMargin,
        marginTop:hMargin,
        alignItems:'center',
    }
});

.