仿美团项目学习源码分析(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;