React Native 中封装控件

开发场景是：一个考勤打卡模块。其中有一个考勤记录，考勤记录点击进去考勤详情，在考勤异常的情况下，显示补卡按钮；考勤正常的情况下，只显示考勤的详情。具体可以参考企业微信的考勤功能。

因为是初学react native 所以就以此尝试封装控件。

先上代码：

import { NaviBar } from '../../../components';
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { ListRow } from 'teaset';
import { color } from 'react-native-reanimated';
import { TouchableHighlight } from 'react-native-gesture-handler';
import navigationHelper from '../../../navigation/navigationHelper';
{/**
  此页面是否可以补卡的状态，服务器还没有返回字段，这里面用是不是已经补卡作为测试UI
 */}
export default class AttendanceDetails extends React.Component {
  constructor(props) {
    super(props);

    this.state = {

    };
    //  console.log("------此处是页面跳转传递过来的参数为-----打开时间：" + {time})
  }

  componentDidMount() {
   
   // console.log("------>此时的是否补卡数据为" + item.is_replace)
  }


  render() {
    const { item } = navigationHelper.getParams();
    console.log("传递过来的打卡时间为------" + item)

    if (!item.is_replace) {
      return (
        <HaveButtonView clock_time={item.clock_time} item={item}/>
      );
    } else {
      return (
        <NoButtonView clock_time={item.clock_time}/>
      );
    }

  }
}

//包含补卡申请与考勤申请的控件
function HaveButtonView(props) {
  return (<View style={styles.container}>
    <NaviBar title={'打卡详情'} isTopNavigator={false} />

    <View style={styles.content}>
      <View style={styles.listStyleBottom}>
        <Text style={styles.textLeft}>打卡时间</Text>
        <Text style={styles.textRight}>{props.clock_time}</Text>
      </View>
      <View style={styles.listStyleBottom}>
        <Text style={styles.textLeft}>打卡地点</Text>
        <Text style={styles.textRight}>{ }</Text>
      </View>
      <View style={styles.listStyleBottom} >
        <TouchableHighlight
          underlayColor={'rgb(106,162,255)'}
          onPress={() =>
            navigationHelper.push('AttendanceOneMoreTimeRequestScreen', {
              item: props.item,
            })
          }>
          <View style={styles.listStyleBottom}>
            <Text style={styles.leftButton}>补卡申请</Text>
          </View>
        </TouchableHighlight>

        <Text style={styles.leftButton}>|</Text>

        <TouchableHighlight
          underlayColor={'rgb(106,162,255)'}
          onPress={() =>
            navigationHelper.push('ApproveTabScreen', { type: 'leave' })
          }>
          <View style={styles.listStyleBottom}>
            <Text style={styles.leftButton}>假勤申请</Text>
          </View>
        </TouchableHighlight>
      </View>
    </View>
  </View>)
}

//不能补卡的点击进来仅仅显示详情页面
function NoButtonView(props) {
  return (<View style={styles.container}>
    <NaviBar title={'打卡详情'} isTopNavigator={false} />

    <View style={styles.content}>
      <View style={styles.listStyleBottom}>
        <Text style={styles.textLeft}>打卡时间</Text>
        <Text style={styles.textRight}>{props.clock_time}</Text>
      </View>
      <View style={styles.listStyleBottom}>
        <Text style={styles.textLeft}>打卡地点</Text>
        <Text style={styles.textRight}>{ }</Text>
      </View>
    </View>
  </View>)
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F9F9F9',
  },

  listStyle: {
    marginTop: 10,
  },
  listStyleBottom: {
    marginTop: 2,
    flexDirection: 'row',
    backgroundColor: 'white',
    height: px2dp(80),
    fontSize: FONT_SIZE(18),
  },

  textLeft: {
    color: 'grey',
    textAlign: 'center',
    textAlignVertical: 'center',
    marginLeft: px2dp(40),
  },
  textRight: {
    color: 'black',
    textAlign: 'left',
    textAlignVertical: 'center',
    marginLeft: px2dp(40),
    marginRight: px2dp(40),
    flex: 1
  },

  content: {
    flex: 1,
    marginTop: NEW_STATUS_BAR_NAV_BAR_HEIGHT,
    height: SCREEN_HEIGHT - NEW_STATUS_BAR_NAV_BAR_HEIGHT,
  },
  leftButton: {
    marginLeft: px2dp(40),
    color: '#6ba1ff',
    textAlign: 'center',
    textAlignVertical: 'center',
    fontSize: FONT_SIZE(18),
  },
});