ReactNative TabBarIOS和NavigatorIOS
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 (
<TabBarIOS
unselectedTintColor="#000000"
tintColor="#000000"
barTintColor="#F5F5F5">
<TabBarIOS.Item
title="首頁"
icon={require('../images/Home.png')}
selectedIcon={require('../images/HomeSelected.png')}
renderAsOriginal
selected={this.state.selectedTab === 'Home'}
onPress={() => {
this.setState({
selectedTab: 'Home',
});
}}>
<NavigatorIOS
style={{flex: 1}}
navigationBarHidden={true}
initialRoute={{
title: "首頁",
component: HomeView,
passProps: { myProp: _this },
}}
/>
</TabBarIOS.Item>
<TabBarIOS.Item
title="釋出"
icon={require('../images/ReleaseGoods.png')}
selectedIcon={require('../images/ReleaseGoodsSelected.png')}
renderAsOriginal
selected={this.state.selectedTab === 'Release'}
onPress={() => {
this.setState({
selectedTab: 'Release',
notifCount: this.state.notifCount + 1,
});
}}>
<NavigatorIOS
style={{flex: 1}}
initialRoute={{
title: "釋出",
component: ReleaseView
} }
/>
</TabBarIOS.Item>
<TabBarIOS.Item
title="訊息"
icon={require('../images/Message.png')}
selectedIcon={require('../images/MessageSelected.png')}
badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
renderAsOriginal
selected={this.state.selectedTab === 'Message'}
onPress={() => {
this.setState({
selectedTab: 'Message',
notifCount: this.state.notifCount + 1,
});
}}
>
<NavigatorIOS
style={{flex: 1}}
initialRoute={{
title: "訊息",
component: MessageView
}}
/>
</TabBarIOS.Item>
</TabBarIOS>
);
};
}
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 (
<View style={styles.container}>
<StatusBar
backgroundColor="white"
barStyle="light-content"/>
<View style={[{width:width} ,styles.headerView]}>
<Image source={{uri:_this.state.member_avatar}}
style={styles.headerImage}>
</Image>
<Text style={styles.userNameText}>
{_this.state.member_nickname}
</Text>
<Text style={styles.storeNameText}>
店鋪名稱: {_this.state.store_name}
</Text>
<TouchableOpacity onPress={this.exit.bind(_this)}>
<Text style={styles.exitBtn}>退出</Text>
</TouchableOpacity>
</View>
<View style={styles.showView}>
<Text style={{top:10,left:10}}>身價</Text>
<View style={{top:-5,
left:50,
width:width-130,
height:14,
backgroundColor:'#D3D3D3',
borderRadius:7
}}>
</View>
<View style={{top:-19,
left:50,
width:(width-130)*this.state.sumOrder,
height:14,
backgroundColor:'#FFFF00',
borderRadius:7
}}>
</View>
<Text style={[styles.titleShow,{top:-32}]}>
{this.state.amountTitle}
</Text>
<Text style={{top:-46,left:width-70}}>
排名
<Text style={{color:'red'}}>
{this.state.amount_rank}
</Text>
</Text>
<Text style={{top:-17,left:10}}>
魅力
</Text>
<View style={{top:-31,
left:50,
width:width-130,
height:14,
backgroundColor:'#D3D3D3',
borderRadius:7
}}>
</View>
<View style={{top:-45,
left:50,
width:(width-130)*this.state.count,
height:14,
backgroundColor:'#4169E1',
borderRadius:7
}}>
</View>
<Text style={[styles.titleShow,{top:-58}]}>
{this.state.registerTitle}
</Text>
<Text style={{top:-72,left:width-70}}>
排名
<Text style={{color:'red'}}>
{this.state.register_rank}
</Text>
</Text>
<Text style={{top:-45,left:10}}>聲望</Text>
<View style={{top:-59,
left:50,
width:width-130,
height:14,
backgroundColor:'#D3D3D3',
borderRadius:7
}}>
</View>
<View style={{top:-73,
left:50,width:(width-130)*this.state.sum,
height:14,
backgroundColor:'#2E8B57',
borderRadius:7
}}>
</View>
<Text style={[styles.titleShow,{top:-86}]}>
{this.state.inviteTitle}
</Text>
<Text style={{top:-100,left:width-70}}>
排名
<Text style={{color:'red'}}>
{this.state.invite_rank}
</Text>
</Text>
</View>
<Image source={require('../images/doImage.png')}
style={styles.doImage}>
</Image>
</View>
);
}
}
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
}
});
相關文章
- 如何評價ionic和reactnative？React
- ReactNative入門React
- ONE-ReactNativeReact
- ReactNative Demo -SearchInputReact
- 深入小程式系列（三） ReactNative和小程式混編React
- ReactNative初體驗React
- ReactNative分包實踐React
- ReactNative版友盟推送React
- ReactNative實現ToastReactAST
- ReactNative環境搭建React
- ReactNative之NavigatorReact
- ReactNative 生命週期React
- ReactNative仿《ONE》APPReactAPP
- ReactNative呼叫原生模組React
- ReactNative Demo - ImageVIew 使用ReactView
- ReactNative flex 佈局ReactFlex
- Weex & ReactNative & JSPatchReactJS
- ReactNative元件詳解React元件
- ReactNative iOS 互動ReactiOS
- ReactNative之手勢識別React
- ReactNative常見問題React
- ReactNative Demo - Dimensions 的使用React
- ReactNative Demo - NavigationView 使用ReactNavigationView
- ReactNative Demo - Navigator 使用React
- ReactNative WebView元件詳解ReactWebView元件
- ReactNative Image元件詳解React元件
- ReactNative開發城市列表頁React
- ReactNative ViewPageAndroid元件詳解ReactViewAndroid元件
- ReactNative仿某租車軟體React
- ReactNative與iOS的互動ReactiOS
- ReactNative 專案工作總結React
- ReactNative呼叫Android原生模組ReactAndroid
- 第一個reactnative專案React
- ReactNative TextInput 常用方法實踐React
- ReactNative快速入門筆記React筆記
- ReactNative學習筆記（一）React筆記
- ReactNative&weex&DeviceOne對比Reactdev
- ReactNative iOS原始碼解析（一）ReactiOS原始碼