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(            
     
      设置
             );    }    render(){        return(            
     
                      {/* 导航栏样式 */}                
      
        this.renderTitleItem()}                />                {/* 九宫格 */}                
                       
       
         {                                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={'提交'}                />            
       
      
             );    }    _renderRow(rowData, sectionID, rowID, highlightRow){        return(            
     
      {that._onPress(rowData.title)}}>                
                          
                           
       
        {rowData.title}
                       
                  
             );    }    _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',    }});

.