RN-微信钱包页面布局

最新推荐文章于 2021-05-26 16:37:03 发布
原创 最新推荐文章于 2021-05-26 16:37:03 发布 · 660 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

此博客展示了使用React Native编写的微信相关布局代码，包含微信开头布局、腾讯服务布局、限时推广布局和第三方服务布局等。通过导入组件和使用样式表，实现了不同功能区域的展示，如钱包、收付款、信用卡还款等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

//微信

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 react-native-wechar 微信支付、分享
weixin_40652480的博客
05-07 931
(一)前言 React Native开发使用到微信好友或者微信朋友圈分享功能 (二)应用申请审核 首先微信开发平台去注册账号并且创建一个移动应用。(地址:https://open.weixin.qq.com) 将所必填的信息填写完整，应用名称以及中英文（英文是选填的）的信息，移动应用图标分别为28x28何108x108的png格式图标。 继续点击下一步填写iOS项目的bundle ID以及android项目的包名和应用签名。请注意应用签名获取需要安装一下获取签名信息的APK包，同时你的android应
ReactNative-IOS 支付篇-微信
双手成就你的梦想
05-22 708
  废话不多说，直接来操作步骤介绍。1.安装插件  在项目根目录下面采用npm方式安装  react-native install react-native-wechat  由于react-native install 命令会自动link静态库，所以不需要再react-native link。用xcode打开工程run,如果发现该库没有添加进来，可以手动导入add files ，然后添加静态库文件...
html模仿微信支付页面
04-05
html css jquery 模仿微信支付页面，用于微信公众号支付，展示微信支付页面。jquery微信支付代码
微信支付
gengbaolong的博客
05-01 905
微信支付,appid
android仿微信充值布局,Android 高仿微信支付数字键盘功能
weixin_29227425的博客
05-26 487
现在很多app的支付、输入密码功能，都已经开始使用自定义数字键盘，不仅更加方便、其效果着实精致。下面带着大家学习下，如何高仿微信的数字键盘，可以拿来直接用在自身的项目中。先看下效果图：1. 自定义布局android:layout_width="match_parent"android:layout_height="wrap_content">android:id="@+id/gv_keybo...
微信移动端页面开发之页面布局
GitChat
04-01 463
随着微信用户数量超过 10 亿，作为 Web 开发者，微信很多时候已经成为了我们 Web 页面的载体，我们制作的页面几乎都会在微信上面展示和传播。于是，在开发过程中，如何去兼容微信，就成为了一个 Web 开发者必须面对的问题。 微信内部的浏览器是 QQ 浏览器，微信中的 QQ 浏览器跟我们 PC 上的浏览器有很大区别。本场 Chat 我们先从页面布局开始说起，看看微信中那些虐过我们无数回的样式，该...
RN布局（登陆界面Demo）
targetcloud
12-18 4476
/** * Created by targetcloud on 2016/12/17. */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TextInput } from 'react-native';
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
01-21
navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室——RN_ChatRoom，实现了原生app启动页、AsyncStorage本地存储登录拦截、集成rnPop模态框功能(仿微信popupWindow弹窗菜单
react-native-floatWindow:RN仿微信悬浮窗口
04-30
纯RN仿微信悬浮窗口 运行这个项目 npm install react-native run-ios或react-native run-android 用法 步骤1 npm install react-native-root-siblings 第2步 将SuspensionWindow浮动块拖动到自己的浮动块上 第三...
Android仿微信、支付宝钱包宫格界面Demo
01-26
博文源码，文章链接：http://blog.youkuaiyun.com/airsaid/article/details/50588728
微信网页页面+微信完整项目+html5手机移动端自适应页面+javascript脚本插件+微信支付+前后端开发
08-13
微信网页页面+微信完整项目+html5手机移动端自适应页面+javascript脚本插件+微信支付+前后端开发
react-ReactGridLayout网格布局gridlayout系统但专为React服务
08-15
React-Grid-Layout：网格布局(grid layout)系统，但专为 React 服务
Android仿微信支付宫格导航
06-15
仿支付宫格导航布局。需要5积分拿走不送
ReactNative的响应式网格包含RTL布局支持
08-10
React Native的响应式网格包含RTL布局支持
react-native-responsive-layout:实施响应式布局和网格的简便方法
05-02
React本机响应式布局（RNRL） 通过引入Web开发中的概念，使构建响应式React Native用户界面更加容易的框架。 安装 此软件包仅与RN> = 0.52兼容，因为旧版本不支持基于百分比的宽度以及视图的正确prop类型。 要安装最新版本，只需运行： yarn add react-native-responsive-layout 或者，如果您更喜欢使用npm ： npm install --save react-native-responsive-layout 动机 尽管React Native提供了一种构建复杂本机应用程序的更快方法，但是与Web开发相比，创建响应式RN UI的难度要大得多。 当基于百分比的宽度降落时，此困难有所缓解。 但是，响应式RN UI仍然需要使用许多条件渲染和特定于大小的替代。 RNRL继承了Web开发的优势，以简化本机开发。 RNRL可以指定
RN支付篇-银联支付
双手成就你的梦想
05-25 1312
详情介绍，请参考：银联支付
无需任何自定义，一个布局搞定仿微信支付宝密码框
LikeSidehu的专栏
01-26 359
全网太多的密码输入框的实现方案，基本上都是自定义之类的。看起来还是挺麻烦，冥思苦想，想出了一种简单方案，一个布局就搞定。布局如下; <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="473px" android:layout_height="2...
React Native 学习(二)---仿微信我的钱包界面
WiFi_Uncle的专栏
11-22 2963
效果图 里面的图标都是在阿里图标库下载的，挺好用，力推！以下是代码部分:import React, { Component } from 'react'; import { View, Text, Image, PixelRatio, StyleSheet, } from 'react-native'; export class WeChat exten
rn php,RN布局的实例详解
weixin_33925615的博客
03-11 437
道具和状态我们使用两种数据来控制一个组件：props和state.props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用状态。一般来说，你需要在构造函数中初始化状态(译注：这是ES6的写法，早期的很多ES5的例子使用的是getInitialState方法来初始化状态，这一做法会逐渐被淘汰)，然后在需要修改时调用的setState方法。也就是...
利用rn-diff简化React Native版本升级过程
rn-diff的出现极大地方便了React Native开发者的升级工作，通过可视化展示不同版本之间的差异，开发者可以更加高效和准确地进行代码更新。然而，升级本身只是整个开发周期中的一部分，开发者需要综合考虑社区资源、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值