TabBarIOS.png
1、TabBarIOS的使用
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
TabBarIOS,
NavigatorIOS,
Text,
View } from 'react-native';
import MessageView from './MessageView';
import ReleaseView from './ReleaseView';
import HomeView from './HomeView';
export default class MainView extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'Home',
notifCount: 0,
presses: 0,
};
}
render() {
var _this=this;
return (
{
this.setState({
selectedTab: 'Home',
});
}}>
{
this.setState({
selectedTab: 'Release',
notifCount: this.state.notifCount + 1,
});
}}>
0 ? this.state.notifCount : undefined}
renderAsOriginal
selected={this.state.selectedTab === 'Message'}
onPress={() => {
this.setState({
selectedTab: 'Message',
notifCount: this.state.notifCount + 1,
});
}}
>
);
};
}
2、首页页面的搭建
import React, { Component } from 'react';
import {
StyleSheet,
View,
Navigator,
Text,
TouchableOpacity,
Image,
StatusBar,
AsyncStorage} from 'react-native';
import LoginView from './LoginView';import Util from './Util';
import NetUtil from './NetUtil';
export default class HomeView extends Component {
constructor(props) {
super(props);
this.state = {
member_avatar:'https://facebook.github.io/react/img/logo_og.png',
member_nickname:'用户昵称',
store_name:'店铺名称',
store_id:'0',
sumOrder:'',
count:'',
sum:'',
amountTitle:'',
registerTitle:'',
inviteTitle:'',
amount_rank:'0',
register_rank:'0',
invite_rank:'0',
};
}
componentDidMount() {
var _this=this;
AsyncStorage.getItem('member_avatar').then((value) => {
if (value !== null){
_this.setState({
member_avatar:value,
})
}}).done();
AsyncStorage.getItem('member_nickname').then((value) => {
if (value !== null){
_this.setState({
member_nickname:value,
})
}}).done();
AsyncStorage.getItem('store_name').then((value) => {
if (value !== null){
_this.setState({
store_name:value,
})
}}).done();
AsyncStorage.getItem('store_id').then((value) => {
if (value !== null){
_this.setState({
store_id:value,
})
}}).done();
let data={'store_id':this.state.store_id};
let url='http://192.168.0.85/mobile/index.php?act=manager_store&op=datas_invite';
var common=NetUtil.commonParamsWithAct('manager_store','datas_invite');
NetUtil.post(url,data,common,function (set){
if(set.code==10000){
_this.setState({
sumOrder:(_this.progressLength(set.datas.sumOrder)).progress,
count:(_this.userProgressLength(set.datas.count)).progress,
sum:(_this.progressLength(set.datas.sum)).progress,
amountTitle:(_this.progressLength(set.datas.sumOrder)).title,
registerTitle:(_this.progressLength(set.datas.count)).title,
inviteTitle:(_this.progressLength(set.datas.sum)).title,
amount_rank:set.datas.amount_rank,
register_rank:set.datas.register_rank,
invite_rank:set.datas.invite_rank,
})
}else{
alert("网络繁忙,请稍后");
}
});
}
// 进度条计算
progressLength(money){
var progress=0;
var title=money+"/100k";
if (money>0 && money<=100000) {//10万
if(money>10000){
progress=money/100000.0;
title=money+"/100k";
}else{
progress=0.1;
}
}else if(money>100000 && money<=1000000) {//100万
if(money>100000){
progress=money/1000000.0;
title=money+"/1000k";
}else{
progress=0.1;
}
}else if(money>1000000 && money<=10000000) {//1000万
if(money>1000000){
progress=money/10000000.0;
title=money+"/10000k";
}else{
progress=0.1;
}
}else if(money>10000000 && money<=100000000) {//1亿
if(money>10000000){
progress=money/100000000.0;
title=money+"/100000k";
}else{
progress=0.1;
}
}else if(money>100000000 && money<=1000000000) {//10亿
if(money>100000000){
progress=money/1000000000.0;
title=money+"/1000000k";
}else{
progress=0.1;
}
}
return {"progress": progress,"title":title};
}
userProgressLength(count){
var progress=0.0;
var title=count+"/10";
if (count>0&&count<=10) {
progress=count/10.0;
title=count+"/10";
}else if(count>10&&count<=100) {
progress=count/100.0;
title=count+"/100";
}else if(count>100&&count<=1000) {
progress=count/1000.0;
title=count+"/1K";
}else if(count>1000&&count<=10000) {
progress=count/10000.0;
title=count+"/10k";
} else if(count>10000&&count<=100000) {
progress=count/100000.0;
title=count+"/100k";
}else if(count>100000&&count<=1000000) {
progress=count/1000000.0;
title=count+"/1000k";
}
return {"progress":progress,"title":title};
}
//退出登录
exit(){
Util.saveItem('IsLogin','NO');
this.props.myProp.props.navigator.push({
title: '登录',
component:LoginView,
});
}
render() {
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
var _this=this;
return (
{_this.state.member_nickname}
店铺名称: {_this.state.store_name}
退出
身价
{this.state.amountTitle}
排名
{this.state.amount_rank}
魅力
{this.state.registerTitle}
排名
{this.state.register_rank}
声望
{this.state.inviteTitle}
排名
{this.state.invite_rank}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#D3D3D3',
},
headerView:{
backgroundColor: '#000000',
height:100,
marginTop:0,
},
headerImage:{
height:60,
width:60,
marginTop:35,
marginLeft:20,
borderRadius: 30,
borderColor:'white',
borderWidth:1
},
userNameText:{
color:'white',
fontSize:16,
marginLeft:85,
top:-55,
},
storeNameText:{
color:'white',
fontSize:16,
marginLeft:85,
top:-45,
},
exitBtn:{
color:'red',
fontSize:16,
width:50,
top:-95,
alignSelf:'flex-end',
},
showView:{
backgroundColor:'white',
height:125,
marginTop:0,
},
titleShow:{
alignSelf:'center',
backgroundColor:'transparent',
fontSize:10,
},
doImage:{
height:60,
width:60,
marginTop:20,
marginLeft:20
}
});