React Native 学习(二)---仿微信我的钱包界面

效果图

里面的图标都是在阿里图标库下载的，挺好用，力推！

以下是代码部分: //下面九宫格我就写了前面三个，后面几个复制就可以

import React, { Component } from 'react';
import {
    View,
    Text,
    Image,
    PixelRatio,
    StyleSheet,
} from 'react-native';
export class WeChat extends Component {
    render() {
        return(
            <View style={ styles.container}>
                <View style={ styles.header}>
                    <View style={[styles.flex, { flexDirection: 'row'}]}>
                        <View style={[styles.flex, styles.headerArrow]}>
                            <Image source={ require('../img/wechat/arrow.png')}/>
                        </View>
                        <View style={[{flex: 6}]}>
                            <Text style={styles.headerTitle}>我的钱包</Text>
                        </View>
                        <View style={[styles.flex]}>
                            <Image source={ require('../img/wechat/more.png')}/>
                        </View>
                    </View>
                </View>
                <View style={ [styles.itemRow,  styles.part1] }>
                    <View style={ [styles.item, styles.flex, styles.center] }>
                        <Image style={[ styles.itemImg]} source={require('../img/wechat/1-1.png')}/>
                        <Text style={[ styles.itemText]}>收付款</Text>
                    </View>
                    <View style={ [styles.item, styles.flex, styles.center] }>
                        <Image style={[ styles.itemImg]} source={require('../img/wechat/1-2.png')}/>
                        <Text style={[ styles.itemText]}>零钱</Text>
                    </View>
                    <View style={ [styles.item, styles.flex, styles.center] }>
                        <Image style={[ styles.itemImg]} source={require('../img/wechat/1-3.png')}/>
                        <Text style={[ styles.itemText]}>银行卡</Text>
                    </View>
                </View>
                <View style={styles.part2Header}>
                    <Text style={[styles.part2HeaderTitle]}>腾讯服务</Text>
                </View>
                <View style={[styles.part2]}>
                    <View style={[styles.part2_1 , styles.flex]}>
                        <View style={ [styles.itemRow, styles.flex, styles.lineBottom, styles.center] }>
                            <View style={ [styles.center ]}>
                                <Image  style={ [styles.img ]} source={require('../img/wechat/2-1.png')}/>
                                <Text style={ styles.part2ItemText}> 信用卡还款</Text>
                            </View>
                        </View>
                        <View style={ [styles.itemRow, styles.flex, styles.lineLeftRight, styles.lineBottom, styles.center] }>
                            <View style={ [styles.center ]}>
                                <Image  style={ [styles.img ]} source={require('../img/wechat/2-2.png')}/>
                                <Text style={ styles.part2ItemText}> 微粒贷借钱</Text>
                            </View>
                        </View >
                        <View style={ [styles.itemRow, styles.flex, styles.lineBottom,styles.center] }>
                            <View style={ [styles.center ]}>
                                <Image  style={ [styles.img ]} source={require('../img/wechat/2-3.png')}/>
                                <Text style={ styles.part2ItemText}> 手机充值</Text>
                            </View>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    itemRow: {
        flexDirection: 'row',
        height: 100,
    },
    lineLeftRight: {
        borderRightWidth: 1/PixelRatio.get(),
        borderLeftWidth: 1/PixelRatio.get(),
        borderColor: '#000',
    },
    lineBottom: {
        borderBottomWidth: 1/PixelRatio.get(),
        borderColor: '#000',
    },
    flex: {
        flex: 1,
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    item: {
        height: 100,
    },

    itemText: {
        fontSize: 18,
        color: '#fff',
        marginTop: 7,
    },
    fontSize18: {
        fontSize: 18,
    },
    itemImg: {
        width: 50,
    },
    header: {
        height: 70,
        paddingTop: 20,
        backgroundColor: '#393A3F',
    },
    headerTitle: {
        fontSize: 20,
        color: '#fff',
    },
    headerArrow: {
        paddingTop: 0,
        paddingLeft: 10,
        marginRight: 0,
        width: 30,
    },
    part1: {
        height: 160,
        paddingTop: 20,
        backgroundColor: '#676E78',
    },
    part2Header: {
        height: 50,
        backgroundColor: '#EFEEF3',
    },
    part2HeaderTitle: {
        color: "#3A393F",
        marginLeft: 30,
        paddingTop: 10,
        fontSize: 20,
    },
    part2:{
        height: 300,
    },
    part2_1: {
        flexDirection: 'row',
        flex: 1,
    },
    part2ItemText: {
        fontSize: 16,
        color: '#000',
        marginTop: 7,
    },
    img: {
        width: 40,
        height: 40,
    },
});

图标: 链接：http://pan.baidu.com/s/1qXPLR2k 密码：iu2u
没有找到微信中一模一样的图标，差不多就行了。
有问题，随时联系，一起交流 Q2279770758