開始搞一下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;
(文件沒有上傳，如果看得上直接復制代碼即可)
第一次寫勿噴········
