MoreAppCell.js 2.43 KB
/**
 * Created by jone on 2017/4/10.
 */
import React, {Component} from 'react';

import {
    View,
    Text,
    TouchableWithoutFeedback,
    StyleSheet,
    TouchableOpacity,
    Image,
    Dimensions,
} from 'react-native';

export default class MoreAppCell extends Component {
    constructor(props) {
        super(props);
        this.images = {
            1: require('../../images/mine_setting_app_yohonow.png'),
            2: require('../../images/mine_setting_app_yohomars.png'),
        }
    }


    render() {
        return (
            <View style={styles.container}>
                <View style={styles.titleHelighted}>
                    <Text>更多应用</Text>
                </View>
                <View style={styles.bottomStyle}>
                    <TouchableOpacity
                        activeOpacity={0.5}
                        onPress={
                            () =>  this.props.onPressItem && this.props.onPressItem(9)
                        }
                    >
                        <View style={styles.titleNormal}>
                            <Image source={this.images[1]} style={styles.leftImgStyle}/>
                            <Text>Yoho!Now</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={0.5}
                        onPress={
                            () =>  this.props.onPressItem && this.props.onPressItem(10)
                        }
                    >
                    <View style={styles.titleNormal}>
                        <Image source={this.images[2]} style={styles.leftImgStyle}/>
                        <Text>mars</Text>
                    </View>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }

};

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    container: {
        backgroundColor:'white',
    },
    bottomStyle: {
        backgroundColor:'white',
        paddingBottom:10,
        // 设置主轴的方向
        flexDirection:'row',
        alignItems: 'center',
        // 设置主轴的对齐方式
        justifyContent:'center'
    },
    leftImgStyle: {
    },
    titleHelighted: {
        marginTop:10,
        paddingLeft:10
    },
    titleNormal: {
        width:150,
        height:150,
        justifyContent:'center',
        alignItems:'center'
    },
    titleSelected: {
    },
});