import React, { Component } from 'react';
import {View,Text,Image,StyleSheet,TouchableOpacity} from 'react-native'; 
import Header from './Header'
export default class My extends Component{

    static navigationOptions =  ({navigation,screenProps})=>({
        tabBarLabel: '我的',
        tabBarIcon: ({ focused, tintColor }) => <Image style={styles.tabImg} source={`${focused ? require('../static/img/my.png') : require('../static/img/my-unchoose.png')}`}/>,
    });

    render() {
        return (
            <View>
                <Header title="我的" leftEvent={()=>{}}></Header>
                {/* <Text>My</Text> */}
                <View style={{ flexDirection:'row',alignItems:'center',padding:20,}}>
                    <Image style={styles.headImg} source={require('../static/img/touxiang.png')}/>
                    <Text style={{marginLeft:20}}>亲爱的XXXX</Text>
                </View>
                <View style={{marginTop:40}}>
                    <TouchableOpacity style={{height:40, flexDirection:'row',alignItems:'center',justifyContent:'space-between',marginHorizontal:20,borderBottomWidth:1,borderBottomColor:'#ddd'}}>
                        <View style={{ flexDirection:'row',alignItems:'center'}}>
                            <Image style={styles.tabImg} source={require('../static/img/fenxiang.png')}/>
                            <Text style={styles.tabtext}>分享</Text>
                        </View>
                        <Image style={styles.tabImg} source={require('../static/img/jiantouyou.png')}/>
                    </TouchableOpacity>
                    <TouchableOpacity style={{height:40, flexDirection:'row',alignItems:'center',justifyContent:'space-between',marginHorizontal:20,borderBottomWidth:1,borderBottomColor:'#ddd'}}>
                        <View style={{ flexDirection:'row',alignItems:'center'}}>
                            <Image style={styles.tabImg} source={require('../static/img/fenxiang.png')}/>
                            <Text style={styles.tabtext}>分享1</Text>
                        </View>
                        <Image style={styles.tabImg} source={require('../static/img/jiantouyou.png')}/>
                    </TouchableOpacity>
                    <TouchableOpacity style={{height:40, flexDirection:'row',alignItems:'center',justifyContent:'space-between',marginHorizontal:20,borderBottomWidth:1,borderBottomColor:'#ddd'}}>
                        <View style={{ flexDirection:'row',alignItems:'center'}}>
                            <Image style={styles.tabImg} source={require('../static/img/fenxiang.png')}/>
                            <Text style={styles.tabtext}>分享2</Text>
                        </View>
                        <Image style={styles.tabImg} source={require('../static/img/jiantouyou.png')}/>
                    </TouchableOpacity>
                    <TouchableOpacity style={{height:40, flexDirection:'row',alignItems:'center',justifyContent:'space-between',marginHorizontal:20,borderBottomWidth:1,borderBottomColor:'#ddd'}}>
                        <View style={{ flexDirection:'row',alignItems:'center'}}>
                            <Image style={styles.tabImg} source={require('../static/img/fenxiang.png')}/>
                            <Text style={styles.tabtext}>分享2</Text>
                        </View>
                        <Image style={styles.tabImg} source={require('../static/img/jiantouyou.png')}/>
                    </TouchableOpacity>
                    <TouchableOpacity style={{height:40, flexDirection:'row',alignItems:'center',justifyContent:'space-between',marginHorizontal:20,borderBottomWidth:1,borderBottomColor:'#ddd'}}>
                        <View style={{ flexDirection:'row',alignItems:'center'}}>
                            <Image style={styles.tabImg} source={require('../static/img/fenxiang.png')}/>
                            <Text style={styles.tabtext}>分享2</Text>
                        </View>
                        <Image style={styles.tabImg} source={require('../static/img/jiantouyou.png')}/>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    tabImg:{
        width: 20,
        height: 20,
    },
    headImg:{
        width: 40,
        height: 40,
    },
    tabtext:{
        fontSize:10,
        marginLeft:20
    }
})