react-nativeAPP开发组件4-我的
导言
最近做app，记录下自己写的组件
组件：UserHome页面
import React, { Component, useState } from 'react';
import {StyleSheet, Text, View, Dimensions, Image, Button, TouchableOpacity, ImageBackground} from 'react-native';
import PropTypes from 'prop-types';
import {BackgroundImage} from 'react-native-elements/dist/config';
const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);
export default class UserHome extends Component {
static propTypes = {
head: PropTypes.string,
name: PropTypes.string,
driverLevel: PropTypes.string,
points: PropTypes.string,
orderNumber: PropTypes.string,
mouthOrderNumber: PropTypes.string,
onHeadPress: PropTypes.func,
onPersonalDataPress:PropTypes.func,
onMyOrderPress: PropTypes.func,
onViewPointPress: PropTypes.func,
onDriverNotePress: PropTypes.func,
onLogOutPress: PropTypes.func,
}
static defaultProps = {
head: '',
name: 'null',
driverLevel: '黄金',
points: '0',
orderNumber: '0',
mouthOrderNumber: '0',
onHeadPress: undefined,
onPersonalDataPress:undefined,
onMyOrderPress: undefined,
onViewPointPress: undefined,
onDriverNotePress: undefined,
onLogOutPress: undefined,
}
constructor(props) {
super(props);
this.headPress = this.headPress.bind(this);
this.personalDataPress = this.personalDataPress.bind(this);
this.myOrderPress = this.myOrderPress.bind(this);
this.viewPointPress = this.viewPointPress.bind(this);
this.driverNotePress = this.driverNotePress.bind(this);
this.logOutPress = this.logOutPress.bind(this);
}
headPress() {
if(this.props.onHeadPress) {
this.props.onHeadPress();
}
};
personalDataPress() {
if(this.props.onPersonalDataPress) {
this.props.onPersonalDataPress();
}
};
myOrderPress() {
if(this.props.onMyOrderPress) {
this.props.onMyOrderPress();
}
};
viewPointPress() {
if(this.props.onViewPointPress) {
this.props.onViewPointPress();
}
};
driverNotePress() {
if(this.props.onDriverNotePress) {
this.props.onDriverNotePress();
}
};
logOutPress() {
if(this.props.onLogOutPress) {
this.props.onLogOutPress();
}
};
render() {
return(
<View style={{
height: '100%',
width: '100%',
backgroundColor: '#DAECFF',
}}>
<View style={{
height: '40%',
width: '100%',
alignItems: 'center',
}}>
<ImageBackground source={this.props.head} style={{
height: '100%',
width: '100%',
}}>
<TouchableOpacity onPress={this.headPress} style={{alignSelf: 'center'}}>
<Image source={this.props.head} style={{
height: 70,
width: 70,
borderRadius: 50,
marginTop: '16%',
alignSelf: 'center',
borderWidth: 2,
borderColor: 'white',
}} />
</TouchableOpacity>
<View style={{
height: '24%',
width: '82%',
borderRadius: 15,
marginTop: '12%',
backgroundColor: '#FFFFFF',
flexDirection: 'row',
alignSelf: 'center',
alignItems: 'center',
}}>
<View style={{
marginLeft: '8%',
alignItems: 'center',
}}>
<Text>{this.props.points}</Text>
<Text>{'已获积分'}</Text>
</View>
<View style={{
marginLeft: '8%',
marginRight: '8%',
alignItems: 'center',
}}>
<Text>{this.props.orderNumber}</Text>
<Text>{'已完成订单'}</Text>
</View>
<View style={{
marginRight: '8%',
alignItems: 'center',
}}>
<Text>{this.props.mouthOrderNumber}</Text>
<Text>{'本月完成订单'}</Text>
</View>
</View>
</ImageBackground>
</View>
<View style={{
height: '70%',
width: '100%',
alignItems: 'center',
backgroundColor: '#ECEDE8',
}}>
<View style={{
height: '16%',
width: '90%',
borderRadius: 20,
marginTop: '6%',
backgroundColor: 'white',
alignItems: 'center',
}}>
<View style={{
height: '50%',
width: '100%',
flexDirection: 'row',
padding: 5,
marginLeft: 10,
alignItems: 'center',
}}>
<Image source={require('./pic/where.png')} style={{
height: '80%',
width: '8%',
}}/>
<Text style={{marginLeft: '2%'}}>{'司机等级'}</Text>
<Text style={{marginLeft: '60%'}}>{this.props.driverLevel}</Text>
</View>
<View style={{
width: '98%',
height: 1,
backgroundColor: '#606266',
opacity: 0.6
}} />
<TouchableOpacity onPress={this.personalDataPress} style={{
height: '50%',
width: '100%',
flexDirection: 'row',
padding: 5,
marginLeft: 10,
alignItems: 'center',
}}>
<Image source={require('./pic/where.png')} style={{
height: '80%',
width: '8%',
}}/>
<Text style={{marginLeft: '2%'}}>{'个人资料'}</Text>
<Text style={{marginLeft: '62%',fontSize: 24}}>{'＞'}</Text>
</TouchableOpacity>
</View>
<View style={{
height: '16%',
width: '90%',
borderRadius: 20,
marginTop: '6%',
backgroundColor: 'white',
alignItems: 'center',
}}>
<TouchableOpacity onPress={this.myOrderPress} style={{
height: '50%',
width: '100%',
padding: 5,
marginLeft: 10,
}}>
<View style={{
height: '100%',
width: '100%',
flexDirection:'row',
alignItems: 'center',
}}>
<Image source={require('./pic/where.png')} style={{
height: '80%',
width: '8%',
}}/>
<Text style={{marginLeft: '2%'}}>{'我的订单'}</Text>
<Text style={{marginLeft: '62%',fontSize: 24}}>{'＞'}</Text>
</View>
</TouchableOpacity>
<View style={{
width: '98%',
height: 1,
backgroundColor: '#606266',
opacity: 0.6
}} />
<TouchableOpacity
onPress={this.viewPointPress} style={{
height: '50%',
width: '100%',
flexDirection: 'row',
padding: 5,
marginLeft: 10,
alignItems: 'center',}}>
<Image source={require('./pic/where.png')} style={{
height: '80%',
width: '8%',
}}/>
<Text style={{marginLeft: '2%'}}>{'查看积分'}</Text>
<Text style={{marginLeft: '62%',fontSize: 24}}>{'＞'}</Text>
</TouchableOpacity>
</View>
<View style={{
height: '8%',
width: '90%',
borderRadius: 10,
marginTop: '6%',
backgroundColor: 'white',
alignItems: 'center',
}}>
<TouchableOpacity onPress={this.driverNotePress} style={{
height: '100%',
width: '100%',
flexDirection: 'row',
padding: 5,
marginLeft: 10,
alignItems: 'center',}}>
<Image source={require('./pic/where.png')} style={{
height: '80%',
width: '8%',
}}/>
<Text style={{marginLeft: '2%'}}>{'司机须知'}</Text>
<Text style={{marginLeft: '62%',fontSize: 24}}>{'＞'}</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
onPress={this.logOutPress} style={{
height: '8%',
width: '50%',
borderRadius: 10,
borderColor: 'red',
borderWidth: 1,
marginTop: '16%',
flexDirection: 'row',
alignItems: 'center',}}>
<Text style={{
fontSize: 18,
color: 'red',
marginLeft: '28%',
}}>{'退出登录'}</Text>
</TouchableOpacity>
</View>
</View>
)
}
};
调用：UserHome页面
import React from 'react';
import {StyleSheet, Text, View, Dimensions, Image, Button} from 'react-native';
import UserHome from './UserHome';
function OrderPlay(){
alert('get Order')
};
function WherePlay(){
alert('get where')
};
function CancelPlay(){
alert('get cancel')
};
function personData(){
alert('personData')
};
function myOrder(){
alert('myOrder')
};
function viewPoint(){
alert('ViewPoint')
};
function driverNote(){
alert('driverNote')
};
function logOut(){
alert('logOut')
};
function head(){
alert('head')
};
const App = () => {
return (
<View>
<UserHome head={require('./pic/whn1.jpg')}
onHeadPress={head}
onPersonalDataPress={personData}
onMyOrderPress={myOrder}
onViewPointPress={viewPoint}
onDriverNotePress={driverNote}
onLogOutPress={logOut}/>
</View>
);
};
export default App;
注意
该文章仅个人学习使用，欢迎大家一起交流学习