效果图
里面的图标都是在阿里图标库下载的,挺好用,力推!
以下是代码部分: //下面九宫格我就写了前面三个,后面几个复制就可以
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