campus_react_local/App/views/mine/View/UserCenterItem.js

/**
 * Created by zack on 2018/6/24.
 */
import {
	View,
	Text,
	StyleSheet,
	Image,
	ImageBackground,
	TouchableOpacity,
	FlatList
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'

export default class UserCenterItem extends Component {
	constructor(props) {
		super(props)
		this.state = {
			image: props.image,
			title: props.title
		}
	}

	componentWillReceiveProps(props) {
		this.setState({
			image: props.image,
			title: props.title
		})
	}

	shouldComponentUpdate(nextProps) {
		if (nextProps.title !== this.state.title) {
			return true
		}

		return false
	}

	render() {
		return (
			<View style={styles.View}>
				<Image style={styles.ImageView} source={this.state.image}/>
				<Text style={styles.Text}>{this.state.title}</Text>
				<View style={{position: 'absolute', width: ScreenDimensions.width - 30, height: 0.5, backgroundColor: '#efeff4', left: 30, bottom: 0}} />
			</View>
		);
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: 50,
		backgroundColor: 'white',
		flexDirection: 'row',
		alignItems: 'center'
	},
	ImageView: {
		marginLeft: 30,
		marginRight: 17,
		marginTop: 5,
	},
	Text: {
		fontSize: 13,
		color: '#666666'
	}
})