RN-微信钱包页面布局
//微信
import React, { Component } from "react";
import { View, Text, ScrollView } from "react-native";
import Zhi from "./Zhi";
import Teng from "./Teng";
import Xian from "./Xian";
import Ge from "./Ge";
export default class Wei extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<ScrollView>
<Zhi />
<Teng />
<Xian />
<Ge />
</ScrollView>
);
}
}
//微信开头布局
import React, { Component } from "react";
import { View, Text, Image, StyleSheet } from "react-native";
export default class Zhi extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<View style={[styles.column, styles.yan]}>
<View style={styles.row}>
<View style={[styles.row, styles.bu]}>
<Image style={styles.fan} source={require("./img/a1.png")} />
<Text style={styles.wo}>我</Text>
</View>
<View style={styles.bao}>
<Text style={styles.qian}>钱包</Text>
</View>
<Image style={styles.ge} source={require("./img/a2.png")} />
</View>
<View style={styles.column}>
<View style={[styles.row, styles.tu]}>
<Image style={styles.fu} source={require("./img/b1.png")} />
<Image style={styles.fu} source={require("./img/b2.png")} />
<Image style={styles.fu} source={require("./img/b3.png")} />
</View>
<View style={[styles.row, styles.zi]}>
<Text style={styles.shou}>收付款</Text>
<View style={styles.column}>
<Text style={styles.ling}>零钱</Text>
<Text style={styles.san}>￥ 3.31</Text>
</View>
<Text style={styles.shou}>银行卡</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
row: {
flexDirection: "row"
},
column: {
flexDirection: "column"
},
yan: {
backgroundColor: "#686F78"
},
fan: {
width: 15,
height: 15,
marginVertical: 13,
marginLeft: 10
},
wo: {
fontSize: 15,
color: "#FAFAFA",
marginTop: 10
},
qian: {
fontSize: 17,
color: "#FAFAFA",
fontWeight: "bold"
},
bao: {
width: "100%",
alignItems: "center",
marginTop: 10
},
bu: {
position: "absolute",
left: 0,
top: 0
},
ge: {
width: 25,
height: 25,
position: "absolute",
top: 10,
right: 5
},
tu: {
marginTop: 30,
width: "100%",
justifyContent: "space-around"
},
fu: {
width: 40,
height: 40
},
zi: {
marginTop: 20,
width: "100%",
justifyContent: "space-around",
marginBottom: 15
},
shou: {
fontSize: 15,
color: "#FAFAFA"
},
ling: {
fontSize: 15,
color: "#FAFAFA",
marginLeft: 7
},
san: {
fontSize: 12,
color: "#A0A1A2",
marginLeft: 5,
marginTop: 3
}
});
//腾讯服务布局
import React, { Component } from "react";
import { View, Text, Image, StyleSheet } from "react-native";
export default class Teng extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<View style={[styles.column, styles.line, styles.bei]}>
<View>
<Text style={{ margin: 15, fontWeight: "100", fontSize: 14 }}>
腾讯服务
</Text>
</View>
<View style={[styles.column, styles.bian]}>
<View style={[styles.column, styles.zheng]}>
<View style={[styles.row, styles.heng]}>
<Image style={styles.tu} source={require("./img/c1.png")} />
<Image style={styles.tu} source={require("./img/c2.png")} />
<Image style={styles.tu} source={require("./img/c3.png")} />
</View>
<View style={[styles.row, styles.heng]}>
<Text style={styles.zi}>信用卡还款</Text>
<Text style={styles.zi}>微粒贷借钱</Text>
<Text style={styles.zi}>手机充值</Text>
</View>
</View>
<View style={[styles.column, styles.zheng]}>
<View style={[styles.row, styles.heng]}>
<Image style={styles.tu} source={require("./img/c4.png")} />
<Image style={styles.tu} source={require("./img/c5.png")} />
<Image style={styles.tu} source={require("./img/c6.png")} />
</View>
<View style={[styles.row, styles.heng]}>
<Text style={styles.zi}>理财通</Text>
<Text style={styles.zi}>生活缴费</Text>
<Text style={styles.zi}>Q币充值</Text>
</View>
</View>
<View style={[styles.column, styles.zheng]}>
<View style={[styles.row, styles.heng]}>
<Image style={styles.tu} source={require("./img/c7.png")} />
<Image style={styles.tu} source={require("./img/c8.png")} />
<Image style={styles.tu} source={require("./img/c9.png")} />
</View>
<View style={[styles.row, styles.heng]}>
<Text style={styles.zi}>城市服务</Text>
<Text style={styles.zi}>腾讯公益</Text>
<Text style={styles.zi}>保险服务</Text>
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
row: {
flexDirection: "row"
},
column: {
flexDirection: "column"
},
line: {
borderTopColor: "#E0E2E5",
borderTopWidth: 10
},
heng: {
width: "100%",
justifyContent: "space-around"
},
bei: {
backgroundColor: "#FFFFFF",
borderColor: "#E0E2E5",
borderWidth: 1
},
tu: {
width: 35,
height: 35
},
zi: {
fontSize: 13
},
bian: {
borderColor: "#D2CFCF",
borderWidth: 1
},
zheng: {
marginVertical: 15
}
});
//限时推广
import React, { Component } from "react";
import { View, Text, Image, StyleSheet } from "react-native";
export default class Xian extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<View>
<View style={[styles.column, styles.line, styles.bei]}>
<View>
<Text style={{ margin: 15, fontWeight: "100", fontSize: 14 }}>
限时推广
</Text>
</View>
<View style={[styles.column, styles.bian]}>
<View style={[styles.column, styles.zheng]}>
<View style={[styles.row, styles.heng]}>
<Image style={styles.tu} source={require("./img/d1.png")} />
</View>
<View style={[styles.row, styles.heng]}>
<Text style={styles.zi}>腾讯网卡</Text>
</View>
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
row: {
flexDirection: "row"
},
column: {
flexDirection: "column"
},
line: {
borderTopColor: "#E0E2E5",
borderTopWidth: 10
},
heng: {
width: "100%",
marginHorizontal: 10
},
bei: {
backgroundColor: "#FFFFFF",
borderColor: "#E0E2E5",
borderWidth: 1
},
tu: {
width: 35,
height: 35,
marginLeft: 3
},
zi: {
fontSize: 13
},
bian: {
borderColor: "#D2CFCF",
borderWidth: 1
},
zheng: {
marginVertical: 15
}
});
//第三方服务布局
import React, { Component } from "react";
import { View, Text, Image, StyleSheet } from "react-native";
export default class Ge extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<View style={[styles.column, styles.line, styles.bei]}>
<View>
<Text style={{ margin: 15, fontWeight: "100", fontSize: 14 }}>
第三方服务
</Text>
</View>
<View style={[styles.column, styles.bian]}>
<View style={[styles.column, styles.zheng]}>
<View style={[styles.row, styles.heng]}>
<Image style={styles.tu} source={require("./img/e1.png")} />
<Image style={styles.tu} source={require("./img/e2.png")} />
<Image style={styles.tu} source={require("./img/e3.png")} />
</View>
<View style={[styles.row, styles.heng]}>
<Text style={styles.zi}>火车票机票</Text>
<Text style={styles.zi}>滴滴出行</Text>
<Text style={styles.zi}>京东优选</Text>
</View>
</View>
<View style={[styles.column, styles.zheng]}>
<View style={[styles.row, styles.heng]}>
<Image style={styles.tu} source={require("./img/e4.png")} />
<Image style={styles.tu} source={require("./img/e5.png")} />
<Image style={styles.tu} source={require("./img/e6.png")} />
</View>
<View style={[styles.row, styles.heng]}>
<Text style={styles.zi}>美团外卖</Text>
<Text style={styles.zi}>电影演出赛事</Text>
<Text style={styles.zi}>吃喝玩乐</Text>
</View>
</View>
<View style={[styles.column, styles.zheng]}>
<View style={[styles.row, styles.heng]}>
<Image style={styles.tu} source={require("./img/e7.png")} />
<Image style={styles.tu} source={require("./img/e8.png")} />
<Image style={styles.tu} source={require("./img/e9.png")} />
</View>
<View style={[styles.row, styles.heng, styles.ju]}>
<Text style={styles.zi}> 酒店 </Text>
<Text style={styles.zi}> 摩拜单车</Text>
<Text style={styles.zi}>蘑菇街女装</Text>
</View>
</View>
<View style={[styles.column, styles.zheng]}>
<View style={[styles.row, styles.heng]}>
<Image style={styles.tu} source={require("./img/e10.png")} />
<Image style={styles.tu} source={require("./img/e11.png")} />
<Image style={styles.tu} source={require("./img/e12.png")} />
</View>
<View style={[styles.row, styles.heng]}>
<Text style={styles.zi}>唯品会特卖</Text>
<Text style={[styles.zi, styles.wei]}>转转二手</Text>
<Text style={[styles.zi, styles.cai]}>彩票</Text>
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
row: {
flexDirection: "row"
},
column: {
flexDirection: "column"
},
line: {
borderTopColor: "#E0E2E5",
borderTopWidth: 10
},
heng: {
width: "100%",
justifyContent: "space-around"
},
bei: {
backgroundColor: "#FFFFFF",
borderColor: "#E0E2E5",
borderWidth: 1
},
tu: {
width: 35,
height: 35
},
zi: {
fontSize: 13
},
bian: {
borderColor: "#D2CFCF",
borderWidth: 1
},
zheng: {
marginVertical: 15
},
ju: {
marginLeft: 9
},
wei: {
marginRight: 20
},
cai: {
marginRight: 15
}
});
RN-微信钱包页面布局相关推荐
- 微信H5开发之页面布局
随着微信用户数量超过 10 亿,作为 web 开发者,微信很多时候已经成为了我们 web 页面的载体,我们制作的页面几乎都会在微信上面展示和传播.于是,在开发过程中,如何去兼容微信,就成为了一个 we ...
- 微信开发之小程序的页面布局
flex布局用途:快速实现你所需要的布局(水平居中.垂直居中.左右对齐等) 居中布局实现: 1.对布局容器设置display:flex; 2.利用属性(justify-content(水平方向)和 ...
- 在做vue h5 时因改变手机字体导致页面布局错乱 比如在微信公众号中 放入h5 客户把手机字体或者微信字体调大 导致页面错乱
认定了 就要好好的珍惜对待,人生不容辜负,你必须要更加努力 .加油 骚年 ** 正文: ** 在做vue h5 时因改变手机字体导致页面布局错乱 比如在微信公众号中 放入h5 客户把手机字体或者微信字 ...
- 微信小程序页面布局——上中下结构
小程序页面布局--上中下结构 内容简述 上中下结构:头脚固定+中间滚动框 使用UI框架:Vant Weapp(引入安装参考) 为了方便,使用了less生成wxss,所以展示的是less代码,有需要可以 ...
- 微信或系统字体放大缩小，html页面布局错乱问题
前言 手机可以调整字体大小的地方: 1.手机QQ.微信.部分Android内置浏览器等非自己开发的App都支持字体大小的调整(我只介绍微信): 2.iOS.Android系统本身也可以调整字体大小,导 ...
- 移动端、微信小程序页面布局参考
转自:阮一峰的网络日志 自己手写移动端页面的时候,可参考大佬的这两篇文章.看完之后对页面布局非常有帮助.文章如下: Flex 布局教程:语法篇 网址:http://www.ruanyifeng.co ...
- 微信小程序开发之页面布局
一.概述 Flex布局又称弹性布局,在小程序开发中比较适用.网页布局(layout)是CSS的一个重点应用.布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + f ...
- 微信小程序（看文档写实例四）微信小程序课堂宝APP实现签到子页面布局及课程视频播放页面
一.签到子页面布局 子页面主要是一个签到按钮,然后下方是签到记录列表. 1.签到按钮 布局代码: <button class='sign-button' bindtap='sign'>签到 ...
- 微信小程序用列表渲染实现页面布局
列表渲染** 简单列表 小程序在组件上使用wx:for属性实现列表渲染,即同一个组件批量出现多次,内容可以不同.其原理是使用wx:for绑定一个数组,然后就可以自动用数据中的每个元素以此渲染该组件,形 ...
最新文章
- python客户端和服务端区别_Python socket 客户端和服务器端
- Cortex-M3 的SVC、PendSV异常，与操作系统(ucos实时系统)（转）
- 基于java百货中心供应链管理系统(含源文件)
- openstack中resize更改虚拟机内存、cpu大小后虚拟机状态显示VERIFY_RESIZE
- c++与unreal 的uc脚本交互
- Java面试题：synchronized和对象的访问定位的两种方式
- html 压缩工具 html-minifier
- DEAP2.1软件与Malmquist指数操作说明
- 软件质量保证SQA、软件测试ST
- 设置Tomcat编码格式
- linux深度商店 apt,Deepin系统安装软件总结：通过商店、二进制包、deb包、终端命令安装...
- 算法上的创新点大搜罗
- 新西兰梅西大学有计算机专业吗,新西兰梅西大学世界排名|怎么样|入学条件_海外院校库-柳橙网...
- python多条件判断筛选数据_Python实现多条件筛选目标数据功能【测试可用】
- 如何免费下载学术论文-谷粉学术
- iOS中根据网络环境显示不同图片
- Vue element 自定义表单验证(验证联系方式、邮箱、邮政编码)
- Bluetooth技术学习笔记 ——HFP之Call
- 两个卡方分布之和_正态分布样本均值和样本方差的独立性
- nginx[21944]: nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Ad...se)