react-native 实现微信头部编写

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>

最终实现效果


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页