仿美团项目学习源码分析(1)

"只有不断向比自己优秀的人学习才能有所进步",这是我一直以来所相信的,无论是工作还是为人.作为程序员最直接的学习莫过于源码学习,最近在研究素敌的仿美团项目,觉得有意思的点会记录下来,新的起点从今天开始吧.

项目中封装了NavigationItem组件,其中

let icon = this.props.icon && <Image style={[styles.icon, this.props.iconStyle]} source={this.props.icon} />刚开始没看明白,额,有些不好意思的说,其实就是给了个约定只有在icon确实存在的情况下才进行设置.但是刚开始没朝这个方向想,以为是JS中自己不知道的写法.....

具体代码如下

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';

// create a component
class NavigationItem extends Component {
render() {
let icon = this.props.icon &&
<Image style={[styles.icon, this.props.iconStyle]} source={this.props.icon} />

let title = this.props.title &&
<Text style={[styles.title, this.props.titleStyle]}>{this.props.title}</Text>
return (
<TouchableOpacity style={styles.container} onPress={this.props.onPress}>
{icon}
{title}
</TouchableOpacity>
);
}
}

// define your styles
const styles = StyleSheet.create({
container: {
flex:1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
icon: {
width: 27,
height: 27,
margin: 8,
},
title: {
fontSize: 15,
color: '#333333',
margin: 8,
}
});

//make this component available to the app
export default NavigationItem;