css样式：
// NavigationBarStyle 导航条的样式
// create by 小广
'use strict';
import {
StyleSheet,
} from 'react-native';
export default StyleSheet.create({
// navBar
nav_barView:{
justifyContent: 'center',
},
nav_bar: {
//flex:1,
flex: 1,
flexDirection:'row',
justifyContent: 'center',
},
// 标题纯title
nav_title: {
fontSize:17,
},
// titleView
nav_titleView: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
nav_ItemView:{
width:80,
justifyContent: 'center',
},
// 左Item
nav_leftItem: {
marginLeft:8,
flex:1,
justifyContent: 'center',
alignSelf: 'flex-start',
//backgroundColor:'#f00',
},
// 左Item为title
nav_leftTitle: {
marginRight:5,
marginLeft:5,
fontSize: 14,
},
// 左图片
nav_leftImage: {
margin:10,
resizeMode:'contain',
},
// 右Item
nav_rightItem: {
marginRight:8,
flex:1,
justifyContent: 'center',
alignSelf: 'flex-end',
//backgroundColor:'#3393F2',
},
// 右Item为title
nav_rightTitle: {
marginRight:5,
marginLeft:5,
fontSize: 14,
},
// 右图片
nav_rightImage:{
margin:10,
resizeMode:'contain',
//backgroundColor:'#f00',
},
//resizeMode:'contain',
});
用法：引入之后
import NavigationBar from '你的存放路径/NavigationBar.js'
class XGRNDemo extends Component {
_leftItemAction() {
console.log('左侧按钮点击了');
}
_rightItemAction() {
console.log('右侧按钮点击了');
}
render() {
return (
<View style={styles.container}>
<NavigationBar leftImageSource={require('./nav_back.png')}
rightItemTitle='按钮'
rightTextColor='#3393F2'
leftItemFunc={this._leftItemAction.bind(this)}
rightItemFunc={this._rightItemAction.bind(this)}/>
<ScrollView style={styles.container}
automaticallyAdjustContentInsets={false}
keyboardShouldPersistTaps={true}
keyboardDismissMode='on-drag'
>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'n'}
Cmd+D or shake for dev menu
</Text>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
其中可以自定义的属性
title: PropTypes.string, // nav标题
titleTextColor: PropTypes.string, // nav标题颜色
titleView: PropTypes.node, // nav自定义标题View(节点)
titleViewFunc: PropTypes.func, // nav的titleView点击事件
barBGColor: PropTypes.string, // Bar的背景颜色
barOpacity: PropTypes.number, // Bar的透明度
barStyle: PropTypes.number, // Bar的扩展属性,nav样式(暂未使用)
barBorderBottomColor: PropTypes.string, // Bar底部线的颜色
barBorderBottomWidth: PropTypes.number, // Bar底部线的宽度
statusbarShow: PropTypes.bool, // 是否显示状态栏的20高度(默认true)
leftItemTitle: PropTypes.string, // 左按钮title
leftImageSource: PropTypes.node, // 左Item图片(source)
leftTextColor: PropTypes.string, // 左按钮标题颜色
leftItemFunc: PropTypes.func, // 左Item事件
rightItemTitle: PropTypes.string, // 右按钮title
rightImageSource: PropTypes.node, // 右Item图片(source)
rightTextColor: PropTypes.string, // 右按钮标题颜色
rightItemFunc: PropTypes.func, // 右Item事件
