RN实战项目主页(五)
先看下效果图
底部的tab 用的一个第三方的开源库，或者想用原生的，react-navigationn 里面也有的， 传送门
本项目中用的是 react-native-tab-navigator
import React, { Component } from 'react';
import {
Text,
Image,
View,
BackAndroid,
Platform,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Index from './Index';
import Insurance from './Insurance';
import My from './My';
/**
* 主界面
*/
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'index',//默认选中首页
};
}
render() {
return (
}
renderSelectedIcon={() => }
onPress={() => this.setState({ selectedTab: 'index' })}>
{
}
}
renderSelectedIcon={() => }
onPress={() => this.setState({ selectedTab: 'insurance' })}>
{
}
}
renderSelectedIcon={() => }
onPress={() => this.setState({ selectedTab: 'my' })}>
{
}
);
};
}
这里遇到的坑：
}
renderSelectedIcon={() => }
onPress={() => this.setState({ selectedTab: 'index' })}>
{
//一定要给view 设置style flex：1 否则布局会有些问题
//{...this.props} 属性传递过去 方便那边使用
}
首页代码：
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
PixelRatio,
TouchableWithoutFeedback,
ToastAndroid,
ScrollView,
AsyncStorage,
} from 'react-native';
import PublicIndexItem from './public/PublicIndexItem';
import PublicOrderMangerLayout from './public/PublicOrderMangerLayout';
import NetUtils from '../net/NetUtils';
import OrderManager from './OrderManager';
/**
* 首页
*/
export default class Index extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
//组件加载完毕后，在这里加载网络数据
var url = 'http://192.168.2.112:8042/ShengDaAutoPlatform/remit!clerkDetail';
var service = "clerkDetail";
var userInfo;
AsyncStorage.getItem("userInfo", (error, result) => {
if (error) {
} else {
userInfo = eval('(' + result + ')');
var params = "service=clerkDetail&pageSize=10&page=1&userId=" + userInfo.userId;
NetUtils.post(url, service, params, (result) => {
ToastAndroid.show(result.resultDesc, ToastAndroid.SHORT);
});
}
});
};
saoYisao() {
ToastAndroid.show("扫一扫", ToastAndroid.SHORT);
};
shuChuanma() {
ToastAndroid.show("输串码", ToastAndroid.SHORT);
};
callPhone() {
ToastAndroid.show("打电话", ToastAndroid.SHORT);
};
orderManager() {
let navigator = this.props.navigator;
if(navigator){
navigator.push({
name:'订单管理',
component:OrderManager,
params:{
itemType:'4',
},
});
}
};
orderStatistics() {
ToastAndroid.show("订单统计", ToastAndroid.SHORT);
};
partnerList() {
ToastAndroid.show("合作机构", ToastAndroid.SHORT);
};
render() {
return (
//toolbar
盛大商户端
this.callPhone()}>
//header
this.saoYisao()}>
this.shuChuanma()}>
//scrollview
//组件化抽取，方便复用
this.orderManager()}>
this.orderStatistics()}>
this.partnerList()}>
);
};
}
var style = StyleSheet.create({
container: {
flex: 1,
},
toolBar: {
height: 50,
backgroundColor: '#3f84fe',
flexDirection: 'row',
padding: 10,
alignItems: 'center'
},
header: {
backgroundColor: '#3f84fe',
height: 165,
flexDirection: 'row',
alignItems: 'center',
},
scrollview: {
backgroundColor: '#ebeaf0',
marginBottom: 50,
},
});
保险布局就是一个webview，忽略…
我的
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
Image,
ScrollView,
PixelRatio,
TouchableWithoutFeedback,
} from 'react-native';
import PublicMyItem from './public/PublicMyItem';
/**
* 我的
*/
export default class My extends Component {
constructor(props) {
super(props);
}
render() {
return (
我的
上海美容堂汽车服务有限公司
//组件封装，方便复用
alert('商户二维码')}>
alert('打款记录')}>
alert('联系业务员')}>
alert('合作机构')}>
alert('关于我们')}>
alert('意见反馈')}>
alert('重置密码')}>
alert('退出登录')}>
);
};
}
var style = StyleSheet.create({
container: {
flex: 1,
}
});
订单管理的话，是一个listview，目前没有实现加载更多功能，待研究
有问题的伙伴，记得留言哦
