开始搞一下React Native；
刚开始接触 React Native，本着IOS封装的习惯，今天把导航栏封装了一下；
看效果：
Paste_Image.png
Paste_Image.png
一下是调用方法：
1>第一张效果调用
<NavigationBar
title='标题'
leftTitle = '左边'
rightTitle = '右边'
color="blue"
leftItemCallBackFun = {(event)=>{this.leftItemCallBackAction(event)}}
rightItemCallBackFun = {(event)=>{this.rightItemCallBackAction(event)}}
/>
2> 第二张效果调用
<NavigationBar
title='标题'
leftIconName = 'avatar_vgirl'
rightIconName = 'avatar_grassroot'
color="blue"
leftItemCallBackFun = {(event)=>{this.leftItemCallBackAction(event)}}
rightItemCallBackFun = {(event)=>{this.rightItemCallBackAction(event)}}
/>
-------------------以下是回调方法
// 左边按钮回调
leftItemCallBackAction(event){
alert(event);
}
// 右边边按钮回调
rightItemCallBackAction(event){
alert(event);
}
以下是实现方法：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Image
} from 'react-native';
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var NavigationBar = React.createClass({
getDefaultProps(){
return{
title:'', // 设置标题
color:'', // 设置导航栏颜色
leftIconName: '', // 设置左边图片
leftTitle: '', // 设置左边按钮标题
rightIconName: '', // 设置右边按钮图片
rightTitle: '', // 设置右边按钮标题
leftItemCallBackFun:null, // 左边按钮的回调函数
rightItemCallBackFun:null // 右边按钮的回调函数
}
},
getInitialState(){
return({
});
},
render() {
return (
<View style={styles.container}>
<View style={{width:width,height:20,backgroundColor:this.props.color}} />
<View style={{ backgroundColor:'yellow',
width:width,
height:44,
flexDirection:'row',
alignItems:'center',
justifyContent:'space-between',
backgroundColor:this.props.color}}>
{this.leftSubView()}
<Text style={styles.titleStyles}>{this.props.title}</Text>
{this.rightSubView()}
</View>
<View style={{width: width ,height: 0.5,backgroundColor: 'red'}}></View>
</View>
);
},
// 左边的内容
leftSubView(){
if (this.props.leftIconName.length == 0 && this.props.leftTitle.length ==0) return;
if(this.props.leftIconName.length == 0){ // 不返回图片
return(
<TouchableOpacity activeOpacity={0.5}
onPress={()=>this.leftItemOnPress('点击了左边')}
>
<View style={styles.leftBarItemStyle}>
<Text style={styles.leftTitleStyle}>{this.props.leftTitle}</Text>
</View>
</TouchableOpacity>
)
}else{
return(
<TouchableOpacity activeOpacity={0.5}
onPress={()=>this.leftItemOnPress('点击了左边')}
>
<View style={styles.leftBarItemStyle}>
<Image source={{uri: this.props.leftIconName}} style={{width:30,height: 30,marginLeft: 7,marginTop:7}}/>
</View>
</TouchableOpacity>
)
}
},
// 右边的内容
rightSubView(){
if (this.props.rightIconName.length == 0 && this.props.rightTitle.length ==0) return;
if(this.props.rightIconName.length == 0){ // 不返回图片
return(
<TouchableOpacity activeOpacity={0.5}
onPress={()=>this.rightItemOnPress('点击了右边')}
>
<View style={styles.rightBarItemStyle}>
<Text style={styles.rightTitleStyle}>{this.props.rightTitle}</Text>
</View>
</TouchableOpacity>
)
}else{
return(
<TouchableOpacity activeOpacity={0.5}
onPress={()=>this.rightItemOnPress('点击了右边')}
>
<View style={styles.rightBarItemStyle}>
<Image source={{uri: this.props.rightIconName}} style={{width:30,height: 30,marginRight: 7,marginTop:7}}/>
</View>
</TouchableOpacity>
)
}
},
// 接收点击触发的事件 event: 接收的参数
leftItemOnPress :function(event){
if(this.props.leftItemCallBackFun == null) return;
this.props.leftItemCallBackFun(event);
},
// 接收点击触发的事件 event: 接收的参数
rightItemOnPress :function(event){
if(this.props.rightItemCallBackFun == null) return;
this.props.rightItemCallBackFun(event);
}
});
const styles = StyleSheet.create({
container: {
marginTop: 0,
backgroundColor:'red',
width:width,
height:64
},
// 标题
titleStyles:{
color:'red',
fontSize:20
},
// 左边按钮视图
leftBarItemStyle: {
width: 44,
height: 44,
// 主轴的方向
flexDirection:'row',
// 侧轴居中
alignItems:'center',
},
// 左边文字
leftTitleStyle:{
color:'gray',
marginLeft:10,
textAlign:'center',
fontSize:16
},
// 右边视图
rightBarItemStyle:{
width: 44,
height: 44,
// 主轴的方向
flexDirection:'row',
// 侧轴居中
alignItems:'center',
},
// 右边文字
rightTitleStyle:{
color:'gray',
marginRight:10,
textAlign:'center',
fontSize:16
}
});
// 输出组件类
module.exports = NavigationBar;
(文件没有上传，如果看得上直接复制代码即可)
第一次写勿喷········
