ReactNative自定义组件4-UserHome

导言

 最近做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;

注意

该文章仅个人学习使用，欢迎大家一起交流学习