rn-project/src/components/items.js

#### 项目介绍 类似一个脚手架的工具 此项目致力于构建一套基础，简单，可维护的 适配我司的react-native项目。可在此基础上搭建项目，封装了基础架构，基础组件，以及各种交互等；可快速进行项目搭建，开发。 # 涉及主要技术 - 1. 项目主要架构 * react native * react-navigation * redux

'use strict';

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import BaseStyle from '../constants/Style';
import PropTypes from 'prop-types';

/**
 * 使用方法
 * 
 * 
 * import Items from '../components/items';
 *  <Items
      LeftText={'基础组件'}
       RightIcon={'\ue615'}
    />

 */

export default class Items extends Component {
  static defaultProps = {
    LeftIcon: '',
    LeftText: '',
    RightText: '',
    RightIcon: '',
    ItemsStyle: {},
    LeftIcontStyle: {},
    LeftTextStyle: {},
    RightTextStyle: {},
    RightIcontStyle: {},
  };
  static propTypes = {
    LeftIcon: PropTypes.string, //列表的左边Icon
    LeftText: PropTypes.string, //列表的左边文字
    RightText: PropTypes.string, //列表的右边文字
    RightIcon: PropTypes.string, //列表的右边Icon
    ItemsStyle: PropTypes.object, //列表样式
    LeftIcontStyle: PropTypes.object, //列表左边Icon样式
    LeftTextStyle: PropTypes.object, //左边文字样式
    RightTextStyle: PropTypes.object, // 右边文字样式
    RightIcontStyle: PropTypes.object, //右边Icon样式
    onPress: PropTypes.func,
  };

  constructor(props) {
    super(props);
  }

  render() {
    const {
      LeftIcon,
      LeftText,
      RightText,
      RightIcon,
      ItemsStyle,
      LeftIcontStyle,
      LeftTextStyle,
      RightTextStyle,
      RightIcontStyle,
      onPress,
    } = this.props;
    const LeftChage = LeftIcon ? '' : { marginLeft: 0 };

    return (
      <TouchableOpacity style={[styles.items, ItemsStyle]} onPress={onPress}>
        <View style={styles.leftView}>
          <Text style={[styles.leftIcont, LeftIcontStyle]}>{LeftIcon}</Text>
          <Text style={[styles.leftText, LeftTextStyle, LeftChage]}>
            {LeftText}
          </Text>
        </View>
        <View style={styles.RightView}>
          <Text style={[styles.rightText, RightTextStyle]}>{RightText}</Text>
          <Text style={[styles.rightIcont, RightIcontStyle]}>{RightIcon}</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  items: {
    ...BaseStyle.row,
    ...BaseStyle.justifyContentBetween,
    ...BaseStyle.alignItemsCenter,
    ...BaseStyle.borderItem,
    ...BaseStyle.paddingHorizontal,
    height: 50,
    backgroundColor: '#fff',
  },
  leftView: {
    ...BaseStyle.row,
    ...BaseStyle.alignItemsCenter,
  },
  leftIcont: {
    fontFamily: 'iconfont',
    fontSize: 18,
  },
  leftText: {
    marginLeft: 5,
    fontSize: 15,
    color: '#333',
  },
  RightView: {
    ...BaseStyle.row,
    ...BaseStyle.alignItemsCenter,
    // backgroundColor:"red"
  },
  rightText: {
    fontSize: 15,
    color: '#aaa',
  },
  rightIcont: {
    fontFamily: 'iconfont',
    fontSize: 16,
    color: '#aaaaaa',
  },
});