4.4.1 实现上半部分

上半部分如图 4-11 所示。
图4-11 个人中心上半部分

修改 /src/pages/MyPage.js 代码：

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

import theme from '../config/theme';
import px2dp from '../utils/px2dp';

import Ionicons from 'react-native-vector-icons/Ionicons';
import TextFix from "../component/TextFix";

export default class MyPage extends Component<{}> {
    render() {
        return (
            <View style={styles.container}>
                <ImageBackground
                    source={Platform.OS === 'ios' ? require('../images/my_ios.png') : require('../images/my_android.png')}
                    style={styles.imgTabBar}>
                    <View
                        style={{flexDirection: 'row-reverse'}}>
                        <TouchableOpacity style={{paddingRight: px2dp(20), paddingTop: px2dp(16)}}>
                            <Ionicons
                                name={'ios-settings-outline'}
                                size={28}
                                color={'#666'}/>
                        </TouchableOpacity>
                    </View>
                    <View style={{flex: 1, flexDirection: 'row', alignItems: 'center', paddingHorizontal: px2dp(24)}}>
                        <Image source={require('../images/default_portrait.png')}
                               style={{height: px2dp(120), width: px2dp(120), borderRadius: px2dp(60)}}/>
                        <View style={{marginLeft: px2dp(32)}}>
                            <TextFix style={{fontSize: px2dp(34), color: '#333333'}}>张小盒</TextFix>
                            <View style={styles.roundButton}>
                                <TextFix style={{fontSize: px2dp(18), color: '#fff'}}>每日签到</TextFix>
                            </View>
                        </View>
                    </View>
                    <View style={styles.countView}>
                        <View style={styles.countItem}>
                            <TextFix style={{fontSize: px2dp(30), color: '#333333'}}>我的收藏</TextFix>
                            <TextFix style={{fontSize: px2dp(30), color: '#333333', marginTop: px2dp(8)}}>20</TextFix>
                        </View>
                        <View style={styles.countItem}>
                            <TextFix style={{fontSize: px2dp(30), color: '#333333'}}>关注店铺</TextFix>
                            <TextFix style={{fontSize: px2dp(30), color: '#333333', marginTop: px2dp(8)}}>210</TextFix>
                        </View>
                        <View style={styles.countItem}>
                            <TextFix style={{fontSize: px2dp(30), color: '#333333'}}>浏览足迹</TextFix>
                            <TextFix style={{fontSize: px2dp(30), color: '#333333', marginTop: px2dp(8)}}>210</TextFix>
                        </View>
                    </View>
                </ImageBackground>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    imgTabBar: {
        height: px2dp(410) + (Platform.OS === 'android' ? 0 : theme.barContentPad),
        paddingTop: theme.barContentPad,
    },
    countView: {
        marginHorizontal: px2dp(24),
        height: px2dp(140),
        backgroundColor: '#fff',
        borderRadius: px2dp(12),
        flexDirection: 'row',
        shadowOffset: {width: 0, height: 2},
        shadowOpacity: 0.5,
        shadowRadius: 4,
        shadowColor: '#999999',
        elevation: 4
    },
    countItem: {
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1
    },
    roundButton: {
        height: px2dp(36),
        width: px2dp(120),
        borderRadius: px2dp(18),
        backgroundColor: 'red',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: px2dp(16)
    }
});

代码解释

参考图4-11，上半部分使用了一张背景图，考虑到了状态栏，Android 和 iOS 需要使用两张不一样的图。
背景图通过 ImageBackground 组件加载，使用方式类似 Image，专门用来处理背景图的。 需要在程序中添加以下图片：

/src/images/
    |-- [email protected]
    |-- [email protected]
    |-- [email protected]
    |-- [email protected]
    |-- [email protected]
    |-- [email protected]

上半部分可以划分为三部分，右上角设置按钮，个人信息（头像、姓名、签到），统计信息（收藏、关注、足迹）：

1. 设置按钮部分父布局设置 flexDirection: 'row-reverse' 实现了按钮靠右对齐；
2. 个人信息部分采用横向布局嵌套了纵向布局。
3. 统计信息部分通过 shadow 开头的几个属性和 elevation 实现了阴影效果。

查看代码

如果你已经从 GitHub 上克隆了这个程序的 Git 仓库，那么可以执行 git checkout 4c 签出程序的这个版本。