text: import React, {
    Component,
  } from 'react';
  import {
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
  } from 'react-native';
  import transPxToDp from 'mcrn-ui/util/transPxToDp';
  import PropTypes from 'prop-types';
  
  const styles = StyleSheet.create({
    item: {
      flexDirection: 'row',
      borderBottomColor: '#C9C9C9',
      borderBottomWidth: transPxToDp(1),
      padding: 10,
      backgroundColor: '#fff',
    },
  });
  
  
  class ListItem extends Component {
    constructor(props) {
      super(props);
  
      let pressContext = this;
      if (props.pressContext) {
        pressContext = props.pressContext;
      }
  
      const onPress = props.item.onPress;
      if (typeof onPress === 'function') {
        this.onPress = onPress.bind(pressContext);
      }
    }
  
    render() {
      const content = this.props.item.content;
      const onPress = this.onPress;
  
      const contentComponent = typeof content === 'string' ? (
        <Text>
          {content}
        </Text>
      ) : content;
      let WrapperComponent = View;
  
      if (typeof onPress === 'function') {
        WrapperComponent = TouchableHighlight;
      }
  
      return (
        <WrapperComponent
          style={styles.item}
          underlayColor="#ddd"
          onPress={onPress}
        >
          {contentComponent}
        </WrapperComponent>
      );
    }
  }
  
  ListItem.propTypes = {
    // 列表项
    item: PropTypes.shape({
      // 列表项内容
      content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
      // 列表项点击事件
      onPress: PropTypes.function,
    }),
    // onPress 回调上下文
    pressContext: PropTypes.instanceOf(Component),
  };
  ListItem.defaultProps = {
    item: {
      content: '',
      onPress: () => {},
    },
    pressContext: null,
  };
  
  export default ListItem;
  