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',
}
});
.