版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_28268507/article/details/70140433
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 (
<TabNavigator
tabBarStyle={{ height: 50, overflow: 'hidden' }}
sceneStyle={{ paddingBottom: 0 }}
>
<TabNavigator.Item
selected={this.state.selectedTab === 'index'}
title="首页"
renderIcon={() => <Image source={require('../img/ic_home_index.png')} />}
renderSelectedIcon={() => <Image source={require('../img/ic_home_index_pressed.png')} />}
onPress={() => this.setState({ selectedTab: 'index' })}>
{
<View style={{ flex: 1 }}>
<Index {...this.props} ></Index>
</View>
}
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'insurance'}
title="保险"
renderIcon={() => <Image source={require('../img/ic_home_bx.png')} />}
renderSelectedIcon={() => <Image source={require('../img/ic_home_bx_pressed.png')} />}
onPress={() => this.setState({ selectedTab: 'insurance' })}>
{
<View style={{ flex: 1 }}>
<Insurance {...this.props}></Insurance>
</View>
}
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'my'}
title="我的"
renderIcon={() => <Image source={require('../img/ic_home_my.png')} />}
renderSelectedIcon={() => <Image source={require('../img/ic_home_my_pressed.png')} />}
onPress={() => this.setState({ selectedTab: 'my' })}>
{
<View style={{ flex: 1 }}>
<My {...this.props}></My>
</View>
}
</TabNavigator.Item>
</TabNavigator>
);
};
}
这里遇到的坑：
<TabNavigator.Item
selected={this.state.selectedTab === 'index'}
title="首页"
renderIcon={() => <Image source={require('../img/ic_home_index.png')} />}
renderSelectedIcon={() => <Image source={require('../img/ic_home_index_pressed.png')} />}
onPress={() => this.setState({ selectedTab: 'index' })}>
{
//一定要给view 设置style flex：1 否则布局会有些问题
<View style={{ flex: 1 }}>
//{...this.props} 属性传递过去 方便那边使用
<Index {...this.props} ></Index>
</View>
}
</TabNavigator.Item>
首页代码：
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 (
<View style={style.container}>
//toolbar
<View style={style.toolBar}>
<Text style={{ fontSize: 18, color: 'white', flex: 1, textAlign: 'center' }} >盛大商户端</Text>
<TouchableWithoutFeedback style={{ paddingLeft: 5, paddingRight: 5, }} onPress={() => this.callPhone()}>
<Image source={require('../img/ic_phone.png')}></Image>
</TouchableWithoutFeedback>
</View>
//header
<View style={style.header} >
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableWithoutFeedback onPress={() => this.saoYisao()}>
<Image source={require('../img/ic_saoyisao.png')} ></Image>
</TouchableWithoutFeedback>
</View>
<View style={{ height: 88, width: 1 / PixelRatio.get(), backgroundColor: 'white' }}></View>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableWithoutFeedback onPress={() => this.shuChuanma()}>
<Image source={require('../img/ic_shuchuanma.png')}></Image>
</TouchableWithoutFeedback>
</View>
</View>
//scrollview
<ScrollView style={style.scrollview}>
//组件化抽取，方便复用
<PublicIndexItem leftName="订单管理" rightName='查看全部订单' showLine='true' onPress={() => this.orderManager()}></PublicIndexItem>
<PublicOrderMangerLayout {...this.props} layoutType="1"></PublicOrderMangerLayout>
<View style={{ marginTop: 10 }}>
<PublicIndexItem leftName="订单统计" rightName='' showLine='false' onPress={() => this.orderStatistics()}></PublicIndexItem>
</View>
<Image source={require('../img/index-banner.png')} style={{ marginTop: 10 }}></Image>
<View style={{ marginTop: 10, marginBottom: 10 }}>
<PublicIndexItem leftName="合作机构" rightName='查看所有机构' showLine='true' onPress={() => this.partnerList()}></PublicIndexItem>
<PublicOrderMangerLayout {...this.props} layoutType="2" ></PublicOrderMangerLayout>
</View>
</ScrollView>
</View>
);
};
}
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 (
<View style={style.container}>
<View style={{ height: 50, backgroundColor: '#3f84fe', justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ color: 'white', fontSize: 20 }}>我的</Text>
</View>
<View style={{ height: 184, alignItems: 'center' }}>
<Image source={require('../img/ic_my_banner.png')}></Image>
<View style={{ position: 'absolute', top: 10, alignItems: 'center' }}>
<Image source={require('../img/ic_shop_icon.png')}></Image>
<Text style={{ fontSize: 15, color: 'white', marginTop: 10 }}>上海美容堂汽车服务有限公司</Text>
</View>
</View>
<ScrollView style={{ marginBottom: 50 }}>
//组件封装，方便复用
<PublicMyItem name='商户二维码' style={{ marginTop: 10 }} onPress={() => alert('商户二维码')}></PublicMyItem>
<PublicMyItem name='打款记录' style={{ marginTop: 10 }} onPress={() => alert('打款记录')}></PublicMyItem>
<View style={{ marginLeft: 5, height: 1 / PixelRatio.get(), backgroundColor: '#eaebef' }}></View>
<PublicMyItem name='联系业务员' onPress={() => alert('联系业务员')}></PublicMyItem>
<PublicMyItem name='合作机构' style={{ marginTop: 10 }} onPress={() => alert('合作机构')}></PublicMyItem>
<PublicMyItem name='关于我们' style={{ marginTop: 10 }} onPress={() => alert('关于我们')}></PublicMyItem>
<View style={{ marginLeft: 5, height: 1 / PixelRatio.get(), backgroundColor: '#eaebef' }}></View>
<PublicMyItem name='意见反馈' onPress={() => alert('意见反馈')}></PublicMyItem>
<View style={{ marginLeft: 5, height: 1 / PixelRatio.get(), backgroundColor: '#eaebef' }}></View>
<PublicMyItem name='重置密码' onPress={() => alert('重置密码')}></PublicMyItem>
<View style={{ padding: 15, justifyContent: 'center', alignItems: 'center' }}>
<TouchableWithoutFeedback onPress={() => alert('退出登录')}>
<Image source={require('../img/tcdl_btn.png')} ></Image>
</TouchableWithoutFeedback>
</View>
</ScrollView>
</View>
);
};
}
var style = StyleSheet.create({
container: {
flex: 1,
}
});