ReactNative自定义组件5-进行中卡片

导言

 最近做app，记录下自己写的组件

组件：GoingCard

import React, { Component }  from 'react';
import {StyleSheet, Text, View, Dimensions, Image, Button, TouchableOpacity, ProgressBarAndroid} from 'react-native';
import PropTypes from 'prop-types';
import ProcessBar from './ProcessBar';

const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);

function timeStrChange(str) {
   let outTime = [];
   let allTime = str.split(' ');
   outTime.push(allTime[0]);
   let dayTime = allTime[1].split(':');
   outTime.push(dayTime[0] + ':' + dayTime[1]);
   return outTime;
};

export default class GoingCard extends Component {
   static propTypes = {
       name:               PropTypes.string,
       phoneNumber:        PropTypes.string,
       orderId:            PropTypes.string,
       departure:          PropTypes.string,
       destination:        PropTypes.string,
       transport_time:     PropTypes.string,
       points:             PropTypes.string,
       requirement_types:  PropTypes.string,
       carType:            PropTypes.string,
       note:               PropTypes.string,
       onMapPress:         PropTypes.func,
       onArrivePress:      PropTypes.func,

       okColor:            PropTypes.string,
       noColor:            PropTypes.string,
       nowStep:            PropTypes.number,
       stepDetails:        PropTypes.array,
   }

   constructor(props) {
       super(props);
       this.mapPress = this.mapPress.bind(this);
       this.arrivePress = this.arrivePress.bind(this);

       this.state = {
           name:               this.props.name != undefined?this.props.name:'',
           phoneNumber:        this.props.phoneNumber != undefined?this.props.phoneNumber:'',
           orderId:            this.props.orderId != undefined?this.props.orderId:'',
           departure:          this.props.departure != undefined?this.props.departure:'',
           destination:        this.props.destination != undefined?this.props.destination:'',
           transport_time:     this.props.transport_time != undefined?this.props.transport_time:'',
           points:             this.props.points != undefined?this.props.points:'',
           requirement_types:  this.props.requirement_types != undefined?this.props.requirement_types:'',
           carType:            this.props.carType != undefined?this.props.carType:'',
           note:               this.props.note != undefined?this.props.note:'',

           okColor:            this.props.okColor != undefined?this.props.okColor:'#67C23A',
           noColor:            this.props.noColor != undefined?this.props.noColor:'#9B9EA3',
           nowStep:            this.props.nowStep != undefined?this.props.nowStep:0,
           stepDetails:        this.props.stepDetails != undefined?this.props.stepDetails:['','',''],
       }
   }

   mapPress() {
       if(this.props.onMapPress) {
           // 判断属性onMapPress是否传入函数，传了就执行它
           this.props.onMapPress();
       }
   }

   arrivePress() {
       if(this.props.onArrivePress) {
           this.props.onArrivePress();
       }
   }

   render() {
       let timeArr;
       if(this.state.transport_time != '')
           timeArr = timeStrChange(this.state.transport_time);
       else {
           timeArr = ['未知', '未知'];
       }
       return(
           <View>
               <View style={{
                   width: '95%',
                   marginTop: 10,
                   alignSelf: 'center',
                   height: screenHeight / 7,
                   backgroundColor: 'white',
                   borderTopLeftRadius: 10,
                   borderTopRightRadius: 10,
                   shadowColor: '#303133',
                   elevation: 5,
                   flexDirection: "row",
               }}>
                   <View style={{
                       alignSelf: 'flex-start',
                       width: '70%',
                       height: '100%',
                       backgroundColor: 'white',
                       borderTopLeftRadius: 10,
                       borderBottomLeftRadius: 10,
                   }}>
                       <View style={{
                           flexDirection: 'row',
                           height: '18%',
                       }}>
                           <View style={{
                               height: '100%',
                               width: '80%',
                               flexDirection: 'row',
                           }}>
                               <View style={{
                                   alignSelf: 'flex-start',
                                   height: '100%',
                                   width: '50%',
                                   backgroundColor: '#FDF1DF',
                                   borderTopLeftRadius:10,
                                   alignItems: 'center',
                               }}>
                                   <Text style={{
                                       color: '#D0955E',
                                       fontSize: 12,
                                   }}>{this.state.requirement_types + '·' + this.state.carType}</Text>
                               </View>
                           </View>
                           <View style={{
                               height: '100%',
                               width: '20%',
                               alignItems: 'flex-end'
                           }}>
                               <TouchableOpacity
                                   onPress={this.mapPress}
                                   style={{
                                       height: '100%',
                                       width: '32%',
                                   }}>
                                   <Image source={require('./pic/where.png')} style={{
                                       height: '100%',
                                       width: '100%',
                                       opacity: 0.7
                                   }}></Image>
                               </TouchableOpacity>
                           </View>
                       </View>
                       <View style={{
                           flexDirection: 'row',
                           height: '45%',
                           marginTop: 25,
                           marginLeft: 10,
                           marginRight: 10,
                       }}>
                           <View style={{
                               height: '100%',
                               width: '33%',
                               flexDirection: 'column',
                               alignItems: 'center',
                           }}>
                               <Text style={{
                                   fontSize: 15,
                                   fontWeight: 'bold',
                               }}>{this.state.departure}</Text>
                           </View>
                           <View style={{
                               height: '50%',
                               width: '33%',
                               flexDirection: 'column',
                               alignItems: 'center',
                           }}>
                               <Text style={{
                                   fontSize: 12,
                                   fontWeight: 'bold'
                               }}>{timeArr[0]}</Text>
                               <View style={{
                                   width: '70%',
                                   height: 1,
                                   backgroundColor: '#606266',
                               }} />
                               <Text style={{
                                   fontSize: 12,
                                   fontWeight: 'bold'
                               }}>{timeArr[1]}</Text>
                           </View>
                           <View style={{
                               height: '100%',
                               width: '33%',
                               flexDirection: 'column',
                               alignItems: 'center',
                           }}>
                               <Text style={{
                                   fontSize: 15,
                                   fontWeight: 'bold'
                               }}>{this.state.destination}</Text>
                           </View>
                       </View>
                   </View>
                   <View style={{
                       alignItems: 'center',
                       width: '30%',
                       height: '100%',
                       borderTopRightRadius: 10,
                       backgroundColor: '#D9ECFF',
                   }}>
                       <View style={{
                           flexDirection: 'row',
                           height: '90%',
                           alignItems: 'center',
                       }}>
                           <Image source={require('./pic/points.png')} style={{
                               height: 30,
                               width: 30,
                               opacity: 0.7
                           }}></Image>
                           <Text style={{
                               fontSize: 20,
                               color: '#409EFF',
                               fontWeight: 'bold',
                           }}>{this.state.points}</Text>
                       </View>
                   </View>
               </View>
               <View style={{
                   height: screenHeight * 0.3,
                   width: '95%',
                   alignSelf: 'center',
                   backgroundColor: 'white',
                   borderBottomRightRadius: 10,
                   borderBottomLeftRadius: 10,
                   shadowColor: '#303133',
                   elevation: 5,
               }}>
                   <View style={{
                       alignSelf: 'center',
                       width: '100%',
                       height: 1,
                       opacity: 0.3,
                       backgroundColor: '#606266',
                   }} />
                   <View style={{
                       padding: 10,
                   }}>
                       <Text style={{
                           color: '#9B9EA3'
                       }}>{'姓名:  ' + this.state.name}</Text>
                       <Text style={{
                           color: '#9B9EA3'
                       }}>{'手机号:  ' + this.state.phoneNumber}</Text>
                       <Text style={{
                           color: '#9B9EA3'
                       }}>{'用户说明:  ' + this.state.note}</Text>
                       <Text style={{
                           color: '#9B9EA3'
                       }}>{'订单编号:  ' + this.state.orderId}</Text>
                   </View>
                   <ProcessBar okColor={this.state.okColor}
                               noColor={this.state.noColor}
                               nowStep={this.state.nowStep}
                               stepDetails={this.state.stepDetails}
                   ></ProcessBar>
                   <TouchableOpacity
                       onPress={this.arrivePress} disabled={this.state.nowStep < 3 ? true:false} style={{
                       height: '20%',
                       width: '60%',
                       borderRadius: 20,
                       borderColor: this.state.nowStep <3 ? this.state.noColor:'#409EFF',
                       borderWidth: 1,
                       alignSelf: 'center',
                       flexDirection: 'row',
                       alignItems: 'center',
                   }}>
                       <Text style={{
                           fontSize: 18,
                           color: this.state.nowStep <3 ? this.state.noColor:'#409EFF',
                           marginLeft: '40%',
                       }}>{'到达'}</Text>
                   </TouchableOpacity>
               </View>
           </View>
       )
   }
};

调用：GoingCard

import React from 'react';
import {StyleSheet, Text, View, Dimensions, Image, Button} from 'react-native';
import GoingCard from './GoingCard';

function ArrivePlay(){
   alert('get Arrive')
};

function WherePlay(){
   alert('get where')
};

const App = () => {
 return (
     <View>
        <GoingCard name={'王帅鹏'}
                    phoneNumber={'13849489395'}
                    orderId={'sdsadhasdliaisdhalshddsada'}
                    departure={'上海'}
                    destination={'深圳'}
                    transport_time={'2021-10-23 09:21:00'}
                    points={'200'}
                    requirement_types={'半包'}
                    carType={'豪华型'}
                    outTime={''}
                    note={'越快越好'}
                    okColor={'#67C23A'}
                    noColor={'#9B9EA3'}
                    nowStep={3}
                    stepDetails={['已出发', '到达上车点', '已送达']}
                    onMapPress={WherePlay}
                    onArrivePress={ArrivePlay}/>
     </View>
 );
};

export default App;

注意

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