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.center] }>
                        <Image style={[ styles.itemImg]} source={require('../img/wechat/1-2.png')}/>
                        <Text style={[ styles.itemText]}>零钱</Text>
                    </View>
                    <View style={ [styles.item,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.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.lineLeftRight,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.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(),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,headerArrow: {
        paddingTop: 0,paddingLeft: 10,marginRight: 0,width: 30,part1: {
        height: 160,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',img: {
        width: 40,height: 40,});

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!