先上代码,配合代码讲解一下使用方法,
我这有用到一个屏幕适配工具类,自己写的,使用方法和代码 请点这里
/**
* Created by 卓原 on 2018/6/16.
*
*/
import React from 'react';
import {
Text,
StyleSheet,
View,
TouchableOpacity,
Image,
Platform,
StatusBar
} from 'react-native';
//如果不用react-navigation可不要
import {withNavigation} from 'react-navigation';
//ScreenUtil 为屏幕尺寸适配的工具类
import * as ScreenUtil from "../utils/ScreenUtil";
import PropTypes from 'prop-types';
//这个是我用来切换主题颜色的
//import {connect} from 'react-redux';
const NAV_BAR_HEIGHT_ANDROID = 50;
const NAV_BAR_HEIGHT_IOS = 44;
const StatusBarShape = {
barStyle: PropTypes.oneOf(['light-content', 'default', 'dark-content']),
hidden: PropTypes.bool,
backgroundColor: PropTypes.string,
};
class NavigationBar extends React.Component {
static propTypes = {
style: View.propTypes.style,
title: PropTypes.string,
titleView: PropTypes.element,
hide: PropTypes.bool,
leftButton: PropTypes.element,
rightButton: PropTypes.element,
statusBar: PropTypes.shape(StatusBarShape),
titleLayoutStyle: View.propTypes.style,
leftTextStyle: View.propTypes.style,
leftButton: PropTypes.element,
leftTextStyle: View.propTypes.style,
showLeft: PropTypes.bool,
rightButton: PropTypes.element,
rightTextStyle: View.propTypes.style,
showRight: PropTypes.bool
};
static defaultProps = {
statusBar: {
barStyle: 'default',
hidden: false,
},
showLeft: true,
showRight: false,
};
constructor(props) {
super(props);
this.state = {
title: '',
hide: false,
}
}
render() {
// let {color} = this.props;
let leftButton = this._renderLeft();
let rightButton = this._renderRight();
let statusBar = <View>
<StatusBar {...this.props.statusBar}/></View>;
let titleView = this.props.titleView ? this.props.titleView :
<Text style={[styles.titleStyle, this.props.titleLayoutStyle]}>{this.props.title}</Text>;
let content = <View style={styles.content}>
{leftButton}
<View style={styles.titleView}>{titleView}</View>
{rightButton}
</View>;
return (
//这里有一个{backgroundColor: color} 这个背景色可以写在styles.container样式中,颜色自己定义
<View style={[styles.container,
//{backgroundColor: color},
this.props.style]}>
{statusBar}
{content}
</View>
)
}
_renderLeft() {
let {leftButton, leftTextStyle, showLeft, navigation, onLeftClick} = this.props;
if (!showLeft) {
return null;
}
if (leftButton == null) {
return (
<TouchableOpacity onPress={() => {
if (onLeftClick) {
onLeftClick();
} else {
this.props.navigation.goBack()
}
}}>
<View style={styles.leftContainer}>
<Text style={[styles.leftText, leftTextStyle]}>返回</Text>
</View>
</TouchableOpacity>)
}
return leftButton;
}
_renderRight() {
let {rightButton, rightTextStyle, showRight, onRightClick} = this.props;
if (!showRight) {
return null;
}
if (rightButton == null) {
return (
<TouchableOpacity onPress={() => {
if (onRightClick) {
onRightClick()
}
}}>
<View>
<Text style={[styles.rightText, rightTextStyle]}>更多</Text>
</View>
</TouchableOpacity>)
}
return rightButton;
}
}
/**
* //selector:这是你自己编写的一个函数。这个函数声明了你的组件需要整个 store 中的哪一部分数据作为自己的 props
* 如果用不到redux这个方法可以删除
* @param store
* @returns {{color: *}}
*/
function changeColor(store) {
return {
color: store.changeColorReducer.color
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'green'
},
content: {
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'center',
height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
},
titleView: {
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
left: 40,
right: 40,
top: 0,
bottom: 0,
},
titleStyle: {
fontSize: ScreenUtil.setSpText(28),
color: 'white'
},
leftText: {
color: 'white'
},
rightText: {
color: 'white'
},
leftContainer: {
marginLeft: ScreenUtil.scaleSize(20)
}
});
// 包装 component ,注入 dispatch 和 state 到其默认的 connect(selector)(App) 中;
/**
* 把这个组件用connect包裹住就能拿到store。
注意export default已经拿到下面来了,上面的class前面的导出要删掉
用redux的话需要第一种方法导出,已注释掉
*/
//export default connect(changeColor)(withNavigation(NavigationBar));
//用不到redux推荐在定义类的时候直接导出,类定义为 export default class ...
//withNavigation是一个更高阶的组件,它将导航道具传递给一个包装组件。
//当您无法直接将导航道具传递到组件时,或者在深度嵌套子节点的情况下不希望传递导航道具时,它非常有用。
export default withNavigation(NavigationBar);
在页面使用:
render() {
return (
<View style={{flex: 1}}>
{this._renderNav()}
...
</View>
)
}
_renderNav() {
return (
<NavigationBar
title={'Main'}
//showLeft={false}
onLeftClick={()=>{
alert('a')
}}
leftButton={()=><View><Text>自定义左侧按钮</Text></View>}
statusBar={{
barStyle: 'dark-content',
backgroundColor: 'white',
hidden: false,//true则隐藏
}}
/>
)
}
讲解一下有以下几个方法:
style:整个标题栏的样式
titleView:自定义中间布局
title:中间的东西如果不自定义的话直接传入文字
titleLayoutStyle : 标题的文字样式
showLeft : 默认为true 显示返回键 我这里导航使用的是ReactNavigation,如果需要是其他导航需要返回键功能请改内层代码或者在onLeftClick中写方法,
leftTextStyle :“返回”文字的样式
leftButton:自定义的左面的View
onLeftClick:左面布局点击的方法,如果不传递默认是返回上层页面
rightButton, rightTextStyle, showRight, onRightClick 同理。
但是 showRight默认值为false,即没有右侧按钮
可以自己传入statusBar,默认值为:
statusBar: {
barStyle: 'default',
hidden: false, //true则隐藏statusBar
}
样式大概如此,颜色可以自己定义,
左侧按钮,中间文字,和右侧按钮都可以自己传入一个自己写的布局。
后续会完善功能和方法。