本文主要是介绍ReactNative 自定义标题栏 ReactNative 自定义导航栏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
先上代码，配合代码讲解一下使用方法，
github地址：https://github.com/lizhuoyuan/react-native-navigationBar
我这有用到一个屏幕适配工具类，自己写的，使用方法和代码 请点这里
/*** Created by 李卓原 on 2018/7/6.* email: zhuoyuan93@gmail.com**/import React from 'react';
import {Text,StyleSheet,View,Image,ImageBackground,TouchableOpacity,Platform,StatusBar,ViewPropTypes
} from 'react-native';//ScreenUtil 为屏幕尺寸适配的工具类
import * as ScreenUtil from "../utils/ScreenUtil";
import PropTypes from 'prop-types';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 = {statusBar: PropTypes.shape(StatusBarShape),showBackgroundIMG: PropTypes.bool,style: ViewPropTypes.style,title: PropTypes.string,titleView: PropTypes.element,titleLayoutStyle: ViewPropTypes.style,showLeft: PropTypes.bool,leftText: PropTypes.string,leftTextStyle: ViewPropTypes.style,showleftImg: PropTypes.bool,leftButton: PropTypes.element,showRight: PropTypes.bool,rightText: PropTypes.string,rightTextStyle: ViewPropTypes.style,rightButton: PropTypes.element,};static defaultProps = {statusBar: {barStyle: 'default',hidden: false,},showLeft: true,showleftImg: true, //是否显示返回箭头leftText: '', //返回键位置的文字showRight: false,rightText: '更多',showBackgroundIMG: true //是否有背景图片};constructor(props) {super(props);}render() {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 (<ImageBackground source={this.props.showBackgroundIMG ? require('IMG/app_bar.png') : null}style={[styles.container, this.props.style]}>{statusBar}{content}</ImageBackground>)}_renderLeft() {let {leftButton, leftTextStyle, showLeft, navigation, onLeftClick, leftText, showleftImg} = this.props;if (!showLeft) {return null;}if (leftButton == null) {return (<TouchableOpacity onPress={() => {if (onLeftClick) {onLeftClick();} else {if (navigation) navigation.goBack()}}}><View style={styles.leftContainer}>{showleftImg ?<Image source={require('IMG/back.png')}style={{width: ScreenUtil.scaleSize(25),height: ScreenUtil.scaleSize(25)}}/>: null}<Text style={[styles.leftRightStyle, leftTextStyle]}>{leftText}</Text></View></TouchableOpacity>)}return leftButton;}_renderRight() {let {rightButton, rightTextStyle, showRight, onRightClick, rightText} = this.props;if (!showRight) {return null;}if (rightButton == null) {return (<TouchableOpacity onPress={() => {if (onRightClick) {onRightClick()}}}><View><Text style={[styles.leftRightStyle, rightTextStyle]}>{rightText}</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',width: ScreenUtil.screenW,height: ScreenUtil.scaleSize(58),justifyContent: 'center',},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(18),color: 'white'},leftRightStyle: {color: 'white',fontSize: ScreenUtil.setSpText(14)},leftContainer: {marginLeft: ScreenUtil.scaleSize(17),flexDirection: 'row',alignItems: 'center'}
});// 包装 component ，注入 dispatch 和 state 到其默认的 connect(selector)(App) 中；
/*** 把这个组件用connect包裹住就能拿到store。注意export default已经拿到下面来了，上面的class前面的导出要删掉用redux的话需要第一种方法导出，已注释掉*/
//export default connect(changeColor)(withNavigation(NavigationBar));
//用不到redux推荐在定义类的时候直接导出，类定义为 export default class ...//当这个组件拿不到this.props.navigation时，可使用withNavigation
//withNavigation是一个更高阶的组件，它将导航道具传递给一个包装组件。
//当您无法直接将导航道具传递到组件时，或者在深度嵌套子节点的情况下不希望传递导航道具时，它非常有用。
//导出方式：export default withNavigation(NavigationBar);
export default NavigationBar;关于withNavigation的使用
在页面使用：
常规页面插入
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则隐藏}}/>)}配合ReactNavigation使用
const RootStack = createStackNavigator({TaskList: {screen: TaskListPage},TaskDetails: {screen: TaskDetailsPage}
}, {navigationOptions: ({navigation}) => ({header: <NavigationBar title={navigation.state.routeName}showLeft={navigation.state.routeName !== 'TaskList'}navigation={navigation}/>})
});属性：
| Prop | Type | Default | Description |
|---|---|---|---|
| style | ViewPropTypes.style | - | 标题栏的样式 |
| showBackgroundIMG | bool | true | 背景为一个图片 |
| title | string | - | 标题使用的字符串 |
| titleLayoutStyle | ViewPropTypes.style | - | 标题文字的样式 |
| titleView | PropTypes.element | - | 替换标题文字的组件 |
| leftButton | PropTypes.element | - | 自定义左侧按钮 |
| leftText | string | - | 左侧返回按钮的文字 |
| leftTextStyle | ViewPropTypes.style | - | 替换标题文字的组件 |
| showLeft | bool | true | 是否显示返回按钮 |
| leftImg | source的参数 | ImageSourcePropType | 左侧图片的地址 |
| showleftImg | bool | true | 是否显示标题的后退按钮，需自行替换成其他Image |
| showLeft | bool | true | 是否显示返回按钮 |
| onLeftClick | func | this.props.navigation.goBack() | 左侧按钮的点击事件(默认为ReactNavigation的goback) |
| showRight | bool | false | 是否显示右侧按钮 |
| rightText | string | 更多 | 右侧按钮的文字 |
| rightImg | source的参数 | ImageSourcePropType | 右侧图片的地址，默认不传则不显示 |
| rightTextStyle | ViewPropTypes.style | - | 是否显示返回按钮 |
| rightButton | PropTypes.element | - | 自定义右侧按钮 |
| onRightClick | PropTypes.func | - | 右侧按钮的点击事件 |
| statusBar | { barStyle: PropTypes.oneOf([‘light-content’, ‘default’, ‘dark-content’]), hidden: PropTypes.bool, backgroundColor: PropTypes.string,} | { barStyle: ‘default’, hidden: false,} | 自定义状态栏 |
可以自己传入statusBar，默认值为:
statusBar: {barStyle: 'default',hidden: false, //true则隐藏statusBar}样式大概如此，颜色可以自己定义，
左侧按钮，中间文字，和右侧按钮都可以自己传入一个自己写的布局。
后续会完善功能和方法。
github地址
这篇关于ReactNative 自定义标题栏 ReactNative 自定义导航栏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
