实现下半部分

下半部分如图4-12所示：
图4-12 个人中心底部界面

底部应该使用 ScrollView 组件包裹，这样在一些尺寸比较小的手机，比如 iPhone5 上也可以通过滚动查看全部内容。 ScrollView 组件使用介绍参考官方文档： https://facebook.github.io/react-native/docs/scrollview.html 修改 MyPage.js 代码如下：

//...
import {
    //略 ...
    ScrollView
} from 'react-native';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';

export default class MyPage extends Component<{}> {

    render() {
        return (
            <View style={styles.container}>
                <!--略-->
                <ScrollView>
                    <View style={[styles.rowItem, {height: px2dp(100), marginTop: px2dp(32)}]}>
                        <TextFix style={{fontSize: px2dp(30), color: '#333333', flex: 1}}>购买的订单</TextFix>
                        <TouchableOpacity style={{flexDirection: 'row', alignItems: 'center'}}>
                            <TextFix
                                style={{fontSize: px2dp(24), color: '#999999', marginRight: px2dp(24)}}>购买的订单</TextFix>
                            <SimpleLineIcons
                                name={'arrow-right'}
                                size={16}
                                color={'#999'}/>
                        </TouchableOpacity>
                    </View>
                    <View style={[styles.rowItem, {height: px2dp(140)}]}>
                        <TouchableOpacity style={styles.countItem}>
                            <Image source={require('../images/to_pay.png')}/>
                            <TextFix style={{fontSize: px2dp(24), color: '#333333', marginTop: px2dp(12)}}>待付款</TextFix>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.countItem}>
                            <Image source={require('../images/to_ship.png')}/>
                            <TextFix style={{fontSize: px2dp(24), color: '#333333', marginTop: px2dp(12)}}>待发货</TextFix>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.countItem}>
                            <Image source={require('../images/to_receive.png')}/>
                            <TextFix style={{fontSize: px2dp(24), color: '#333333', marginTop: px2dp(12)}}>待收货</TextFix>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.countItem}>
                            <Image source={require('../images/to_finish.png')}/>
                            <TextFix style={{fontSize: px2dp(24), color: '#333333', marginTop: px2dp(12)}}>未评价</TextFix>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.countItem}>
                            <Image source={require('../images/to_issue.png')}/>
                            <TextFix style={{fontSize: px2dp(24), color: '#333333', marginTop: px2dp(12)}}>退换货</TextFix>
                        </TouchableOpacity>
                    </View>
                    <TouchableOpacity style={[styles.rowItem, styles.topBorder, {height: px2dp(120)}]}>
                        <TextFix style={{fontSize: px2dp(32), color: '#333333', flex: 1}}>我的地址</TextFix>
                        <SimpleLineIcons
                            name={'arrow-right'}
                            size={20}
                            color={'#999'}/>
                    </TouchableOpacity>
                    <TouchableOpacity style={[styles.rowItem, styles.topBorder, {height: px2dp(120)}]}>
                        <TextFix style={{fontSize: px2dp(32), color: '#333333', flex: 1}}>账户与安全</TextFix>
                        <SimpleLineIcons
                            name={'arrow-right'}
                            size={20}
                            color={'#999'}/>
                    </TouchableOpacity>
                    <TouchableOpacity style={[styles.rowItem, styles.topBorder, {height: px2dp(120)}]}>
                        <TextFix style={{fontSize: px2dp(32), color: '#333333', flex: 1}}>客服与帮助</TextFix>
                        <SimpleLineIcons
                            name={'arrow-right'}
                            size={20}
                            color={'#999'}/>
                    </TouchableOpacity>
                    <TouchableOpacity style={[styles.rowItem, styles.topBorder, {height: px2dp(120)}]}>
                        <TextFix style={{fontSize: px2dp(32), color: '#333333', flex: 1}}>意见反馈</TextFix>
                        <SimpleLineIcons
                            name={'arrow-right'}
                            size={20}
                            color={'#999'}/>
                    </TouchableOpacity>
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    //略 ...
    countItem: {
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1
    },
    rowItem: {
        marginHorizontal: px2dp(24),
        flexDirection: 'row',
        alignItems: 'center'
    },
    topBorder: {
        borderTopWidth: px2dp(1),
        borderTopColor: '#f5f5f5'
    }
});

上面代码可以分为三部分——1.购买的订单，2.订单状态，3.我的地址等四个条目。 以我的地址条目介绍，通过设置 TextFix 组件样式 flex：1 ，使当前控件直接沾满了容器剩余全部空间，箭头组件直接被挤到了最右侧，这种技巧是非常实用的。

查看代码

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