react-native 实现微信头部编写

最新推荐文章于 2022-06-10 11:32:25 发布

zdluoa

最新推荐文章于 2022-06-10 11:32:25 发布

阅读量991

点赞数

分类专栏： react-native

本文链接：https://blog.csdn.net/zdluoa/article/details/79966997

版权

本文介绍了如何在react-native中实现微信头部，包括图标左右居右、上下居中的布局，以及点击事件处理，利用Flexbox进行布局，并通过TouchableHighlight实现点击背景色变化。

摘要由CSDN通过智能技术生成

react-native 编写微信头部要点：

1、图标布局（左右居右、上下居中）

2、可以点击事件，点击时有个背景色

布局实现

1、在react-native中无法使用float、display:inline-block

2、使用Flexbox(弹性盒子): flex, alignItems,justifyContent

本例通过Flexbox实现图标布局

 
    header:{ 
   
    height: 
    height( 
    150), 
   
    backgroundColor: 
    '#373a3f', 
   
    paddingRight: 
    width( 
    70) 
   
     }, 
   
 headerTools: { 
 
  flex: 
  1, 
 
  a

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zdluoa

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

wechat:基于 React-Native 的微信朋友圈演示

05-30

wechat 项目介绍 {微信朋友圈 demo} 软件架构软件架构说明 React Native ^0.54.0 dva ^1.1.0 react-navigation ^1.4.0 安装教程 cd Wechat yarn npm start 使用说明 iOS 工程会有无法编译的情况参考

react-native 之布局篇

11-26

304

原文地址 http://segmentfault.com/a/1190000002658374 宽度单位和像素密度 react的宽度不支持百分比，设置宽度时不需要带单位 {width: 10}，那么10代表的具体宽度是多少呢？不知道是官网文档不全还是我眼瞎，反正是没找到，那做一个实验自己找吧：默认用的是iPhone6的模拟器结果是：我们知道iPhone系列的...

1 条评论您还未登录，请先登录后发表或查看评论

React Native学习笔记

weixin_42342065的博客

06-10

784

1.运行项目的安卓设备： (1)真机 (2)模拟器：官方模拟器(Android Virtual Device)，第三方模拟器：Genymotion、BlueStack。（官方模拟器一般免费、功能比较完整，但性能较差；第三方模拟器一般收费或有广告，但性能较好，常用的是Genymotion） ......

React中实现图片预加载、延迟加载、上拉加载、下拉更新

weixin_58495461的博客

09-06

1544

1.jsx代码 import { Component } from "react"; import '../component/list.less' import { searchCar } from '../api/index' import love from '../assets/爱心.gif'; import load from '../assets/images(1)/loading.gif' import arrow from '../assets/search/左箭头.gif' import

React Native的flexbox的布局

baidu_39503346的博客

02-28

281

flexbox：可快速简单的完成各种伸缩性的设计。由W3C组织提出新的布局方案。布局模型： flexbox：是由伸缩容器和伸缩项目组成。其中设为display:flex或display:inline-flex的元素称为伸缩容器；伸缩容器的子元素称为伸缩项目。伸缩容器由两根轴组成，即主轴（main axis）和交叉轴（cross axis）. 伸缩容器属性： display：该属性用来指定...

初识React

weixin_44900249的博客

07-30

246

起步全局安装react cmd里边npm install -g create-react-app 每次创建项目 create-react-app 项目名 cd 项目名将路径进入到项目文件夹 npm start 启动项目,自动打开浏览器进入 localhost:3000 构建项目的一些基本配置 App.js 我们创建项目以后App.js打开是这样的 import React from ...

react-native-webgl：不推荐使用：use expo-gl –为React-native实现WebGL

02-05

总之，虽然`react-native-webgl`试图为React Native提供WebGL支持，但考虑到其潜在的问题和`expo-gl`的优势，推荐使用`expo-gl`来实现高性能的图形渲染。使用`expo-gl`可以确保更好的兼容性、性能和开发体验，同时还...

react-native-rename：仅用一个命令即可重命名react-native应用

01-30

react-native-rename 只需一个命令即可重命名react-native应用该软件包假定您使用react-native init创建了react-native项目。注意：此软件包不会尝试正确重命名构建工件，例如ios/build或Cocoa Pod安装目标。 ...

react-native-floatWindow:RN仿微信悬浮窗口

04-30

react-native-floatWindow 纯RN仿微信悬浮窗口运行这个项目 npm install react-native run-ios或react-native run-android 用法步骤1 npm install react-native-root-siblings 第2步将SuspensionWindow浮动块...

react-native-iap：应用内购买的react-native本机模块

02-03

最近， react-native-iap模块维护得不好。我们正在考虑再次参与并使模块更健康。请参考并与我们分享您或您的组织如何使用它。新年快乐 :party_popper: 介绍此本地React模块将帮助您在Android ， iOS平台和Amazon...

React Native里的Header包教包会

yearningseeker的博客

07-02

1072

1、背景： Header一般由状态栏+标题栏组成，但是ios和android和表现形式不尽相同：上图为非沉浸式，下图为沉浸式。如果不做任何处理，我们在RN中写一个组件放在App.tsx中，android和ios的效果为： import React from 'react'; import {View, Text} from 'react-native'; const App = () => { return ( <> <View style={{he

react 展示对象_React 初学者教程4: 在 React 中设置样式

weixin_39608301的博客

02-04

410

长期以来，我们都是用 CSS 格式化 HTML 内容。用 CSS，可以很好地分离内容和表现形式。CSS 的选择器语法给我们很大的灵活性，来选择哪个要格式化，哪个会略过。你甚至找不到太多的问题来憎恨 CSS 的层叠。好了，不要告诉 React 这些。React不会积极地憎恨 CSS，但是它格式化内容时，有一个不同的视角。正如迄今为止我们所看到的，React 的核心思想之一是让应用程序的界面部分可以自...

display: inline、block、inline-block的区别

qq_38719039的博客

07-13

411

display:block就是将元素显示为块级元素。　　block元素的特点是：此元素将显示为块级元素，此元素前后会带有换行符。　　高度，行高以及顶和底边距都可控制；　　宽度缺省是它的容器的100%，除非设定一个宽度　　<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。　　d...

react-native 之布局总结

xiangzhihong8的专栏

01-17

9765

前言之前我们讲了很多react-native的基础控件，为了方便大家的理解，我们来对react-native的布局做一个总结，观看本节知识，你将看到。宽度单位和像素密度 flex的布局图片布局绝对定位和相对定位 padding和margin的区别和应用场合文本元素宽度单位和像素密度我们知道在Android中是用设备像素来作为单位的（后面又出现了百分比这么一个概念），ios中后面也有了Au

display:inline-block，block，inline的区别与用法

极客神殿

08-29

3809

一、首先要了解什么是块级元素与行级元素块级元素会占领页面的一行，其后多个block元素自动换行、可以设置width，height，设置了width后同样也占领一行、同样也可以设置margin与padding属性。 ps:常见的块级元素:div,img,ul,form,p等行级元素与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。 ps：em，...

react-native 布局基础

qianqw

12-10

277

react-native 布局基础宽度单位和像素密度 react的宽度不支持百分比，设置宽度时不需要带单位&nbsp;{width: 10}，那么10代表的具体宽度是多少呢？&nbsp; 不知道是官网文档不全还是我眼瞎，反正是没找到，那做一个实验自己找吧： var Dimensions = require('Dimensions'); &l...

CSS之使用display:inline-block来布局

极客神殿

05-16

827

1.解释一下display的几个常用的属性值，inline ， block， inline-block inline: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行. block: ...

React-Native 学习之 Flex布局

zhaoweizheng66的专栏

01-31

8080

转自--阮一峰, 此人写的很详细, 收藏了一下, 非常感谢网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实

React Native－1.CSS布局属性之伸缩容器属性

王学森的专栏

01-15

6305

为什么要学习CSS布局属性首先，React Native使用JSX语法（后边的博客会详细讲解）来编程，它其实是一个语法糖，React Native 的代码格式和原来的HTML + CSS 的代码格式有些相似，重要的是，它布局的属性和CSS的布局属性基本是差不多的,所以，我们从CSS的布局属性过渡到React Native 的布局属性，会更加平滑好理解，毕竟它的岁数大很多。。。常用的CSS布局属性“

用react-native实现微信支付