ReactNative中自定义NavigationBar怎么用-创新互联
这篇文章主要介绍React Native中自定义NavigationBar怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联是一家集网站建设,新华企业网站建设,新华品牌网站建设,网站定制,新华网站建设报价,网络营销,网络优化,新华网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。示例代码
// NavigationBar 导航条的自定义封装 // create by 小广 'use strict'; import React, { Component,PropTypes } from 'react'; import { Image, Text, View, Platform, TouchableOpacity, } from 'react-native'; import styles from './NavigationBarStyle' // 导航条和状态栏的高度 const STATUS_BAR_HEIGHT = 20 const NAV_BAR_HEIGHT = 44 export default class NavigationBar extends Component { static defaultProps = { title: 'title', titleTextColor: '#383838', titleViewFunc () {}, barBGColor: '#f8f8f8', barOpacity: 1, barStyle: 0, barBorderBottomColor: '#D4D4D4', barBorderBottomWidth: 0.8, statusbarShow: true, leftItemTitle: '', leftTextColor: '#383838', leftItemFunc () {}, rightItemTitle: '', rightTextColor: '#383838', rightItemFunc () {}, //leftImageSource: require('./nav_back.png'), }; static propTypes = { 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事件 }; render() { // 判断左Item的类型 var onlyLeftIcon = false; // 是否只是图片 if (this.props.leftItemTitle && this.props.leftImageSource) { onlyLeftIcon = true; } else if (this.props.leftImageSource) { onlyLeftIcon = true; } // 左侧图片title都没有的情况下 var noneLeft = false; if (!(this.props.leftItemTitle.length > 0) && !(this.props.leftImageSource)) { noneLeft = true; } // 判断是否自定义titleView var hasTitleView = false; if (this.props.title && this.props.titleView) { hasTitleView = true; } else if (this.props.titleView) { hasTitleView = true; } // 判断右Item的类型 var onlyRightIcon = false; // 是否只是图片 if (this.props.rightItemTitle && this.props.rightImageSource) { onlyRightIcon = true; } else if (this.props.rightImageSource) { onlyRightIcon = true; } // 右侧图片title都没有的情况下 var noneRight = false; if (!(this.props.rightItemTitle.length > 0) && !(this.props.rightImageSource)) { noneRight = true; } // 判断是否显示20状态栏高度 let showStatusbar = this.props.statusbarShow; if (Platform.OS === 'android') { // 安卓不显示 showStatusbar = false; } return (); } } { // 左侧item !noneLeft ? { hasTitleView ?{ // 左侧是图片还是文字 onlyLeftIcon ? : null }: {this.props.leftItemTitle} }{this.props.titleView} :} {this.props.title} { // 右侧item !noneRight ? { // 右侧是图片还是文字 onlyRightIcon ? : null }: {this.props.rightItemTitle} }
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 (); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); Welcome to React Native! To get started, edit index.ios.js Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu
其中可以自定义的属性
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事件
效果如图:
以上是“React Native中自定义NavigationBar怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享名称:ReactNative中自定义NavigationBar怎么用-创新互联
URL标题:http://pwwzsj.com/article/cepgpj.html