react-native 实现微信头部编写

原创 2018年04月16日 21:49:32

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,
alignItems: 'center',
justifyContent: 'flex-end',
flexDirection: 'row'
},
headerIcon:{
alignItems: 'center',
justifyContent: 'center',
width: height(150),
height: height(150)
}

点击事件

    点击事件实现需要使用TouchableHighlight控件

<View style={style.header}>
<View style={style.headerTools}>
<TouchableHighlight onPress={this.search} >
<View style={style.headerIcon}>
<Search color={'#fff'}></Search>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={this.create} >
<View style={style.headerIcon}>
<Add color={'#fff'}></Add>
</View>
</TouchableHighlight>
</View>
</View>

最终实现效果


(转)第四篇React-Native布局实战(二)

React-Native入门指南 第四篇React-Native布局实战(二) 在不断深入的过程中,发现React-Native布局和样式的坑还有很多,他没有像浏览器那样灵活和有规律可循,其中的规...
  • gjq246
  • gjq246
  • 2016-11-15 23:59:59
  • 1333

React-Native中导航组件react-navigation的使用

写在开头的话最近使用React-Native开发新应用,一开始使用的导航器是navigator,后来发现navigator有很多不足之处,而且官方也建议使用react-navigation来进行开发,...
  • YanceChen2013
  • YanceChen2013
  • 2017-08-18 23:51:47
  • 2718

使用ReactNative开发的仿微信客户端

RNWeChat 使用ReactNative开发的仿微信客户端 运行方法 在项目根目录下执行npm install项目中的导航组件使用的ReactNavigation,所以还需要执行...
  • sinat_17775997
  • sinat_17775997
  • 2017-08-17 09:08:16
  • 902

react-native 导航栏

/**  * Sample React Native App  * https://github.com/facebook/react-native  */ 'use strict'; var R...
  • liuguxing
  • liuguxing
  • 2016-02-04 10:21:10
  • 2596

react-native 集成微信支付

上篇文章已经介绍过 react-native 集成支付宝,本篇文章将基于微信支付官方提供的集成文档,介绍如何将微信支付集成到 react-native 应用中。 场景介绍 适用于商...
  • sinat_17775997
  • sinat_17775997
  • 2017-12-17 01:50:42
  • 2996

ReactNative实战之仿微信客户端

代码地址:点击查看代码截图
  • yubo_725
  • yubo_725
  • 2017-06-06 18:49:17
  • 860

React Native 基础 之ListView实现吸顶效果

当滑动时,这个section header会固定在头部,也就是吸顶效果。但是遗憾的是,在Android平台上不支持吸顶效果 实现吸顶效果需要用到此方法 cloneWithRowsAnd...
  • JLhaoran
  • JLhaoran
  • 2017-04-13 14:38:01
  • 2001

Android仿微信头部下拉菜单

1、新建一个类BasePopupWindow,继承PopupWindow,重写其几个方法 public abstract class BasePopupWindow extends PopupWind...
  • EileenChing
  • EileenChing
  • 2015-07-27 16:21:48
  • 2409

仿微信通讯录的Demo----PinnedHeaderListView

仿微信通讯录的Demo—-PinnedHeaderListView 侧边栏首字母匹配 + header分组本示例代码来自网上这里只贴出效果图,附件Demo源码,仅供学习和以后参考时用 附件 De...
  • u013760048
  • u013760048
  • 2015-09-09 17:54:47
  • 585

快速集成 react-native 的微信分享

1.首先开发者需要在微信开放平台申请自己的 appid,这一步骤跳过. 2.在终端下载,并关联 npm install react-native-module --save rnpm link rea...
  • ZCLengendary
  • ZCLengendary
  • 2016-10-31 08:48:01
  • 2008
收藏助手
不良信息举报
您举报文章:react-native 实现微信头部编写
举报原因:
原因补充:

(最多只允许输入30个字)