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:{
        width:30,
        height:30,
        marginBottom:10,
    },
    txtStyle:{
        color:\'#1296DB\',
    },

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

.