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>

最终实现效果