ReactNative 自定义导航栏
自定义NavigationBar的文件JS代码如下
/** * Created by lr on 2017/11/15. */ import React,{Component,PropTypes} from 'react' import { View, Text, StyleSheet, Image, Platform, StatusBar } from 'react-native'; const NAVBAR_HEIGHT_ANDROID=50; const NAVBAR_HEIGHT_IOS=44; const STATUS_BAR_HEIGHT=20; const STATUS_BAR_SHAPE={ backgroundColor:PropTypes.string, barStyle:PropTypes.oneOf(['default','light-content','dark-content']), hidden:PropTypes.bool }; export default class NavigationBar extends 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(STATUS_BAR_SHAPE) } static defaultProps={ statusBar:{ barStyle:'light-content', hidden:false } } constructor(props){ super(props); this.state={ title:'', hide:false } } render(){ let status=<View style={[styles.statusBar,this.props.statusBar]}> <StatusBar {...this.props.statusBar}/> View> let titleView=this.props.titleView?this.props.titleView:<Text style={styles.title}> {this.props.title} Text> let content=<View style={styles.navBar}> {this.props.leftButton} <View style={styles.titleViewContainer}> {titleView} View> {this.props.rightButton} View> return ( <View style={[styles.container,this.props.style]}> {status} {content} View> ) } } const styles=StyleSheet.create({ container:{ flex:1, backgroundColor:'gray' }, navBar:{ justifyContent:'space-between', alignItems:'center', height:Platform.OS==='ios'?NAVBAR_HEIGHT_IOS:NAVBAR_HEIGHT_ANDROID, backgroundColor:'#93b300', flexDirection:'row' }, titleViewContainer:{ justifyContent:'center', alignItems:'center', position:'absolute', left:40, right:40, top:0, bottom:0 }, title:{ fontSize:15, color:'white' }, statusBar:{ height:Platform==='ios'?STATUS_BAR_HEIGHT:20, // height:20 } });
使用方法：
var statusBar={ backgroundColor:'#93b300', barStyle:'light-content' } //导航栏 let NavView=<View style={{height:64}}> <NavigationBar titleView={ <View style={{flexDirection:'row',height:44,justifyContent:'center', alignItems:'center'}} > <Image style={{width:62,height:13}} source={require('../../res/images/1小时.png')} /> <Text style={{color:'white',fontSize:15,marginLeft:7}}>张江路368号Text> <Image style={{width:8,height:5,marginLeft:6}} source={require('../../res/images/导航倒三角.png')} /> View> } statusBar={statusBar} /> View>
全页代码：
var {width,height}=Dimensions.get('window'); export default class PupularPage extends Component{ constructor(props){ super(props); this.dataRepository=new DataRepository(); this.state={ result:'' } } render(){ var statusBar={ backgroundColor:'#93b300', barStyle:'light-content' } //导航栏 let NavView=<View style={{height:64}}> <NavigationBar titleView={ <View style={{flexDirection:'row',height:44,justifyContent:'center', alignItems:'center'}} > <Image style={{width:62,height:13}} source={require('../../res/images/1小时.png')} /> <Text style={{color:'white',fontSize:15,marginLeft:7}}>张江路368号Text> <Image style={{width:8,height:5,marginLeft:6}} source={require('../../res/images/导航倒三角.png')} /> View> } statusBar={statusBar} /> View> return ( <View style={styles.container}> {NavView} <ScrollableTableView renderTabBar={()=><ScrollableTabBar/>} tabBarUnderlineStyle={{backgroundColor:'#93b300'}} tabBarTextStyle={{fontSize:14}} tabBarActiveTextColor='#93b300' tabBarInactiveTextColor='#333333' > <PupularTab tabLabel="超级周三" category='c007'>超级周三PupularTab> <PupularTab tabLabel="蔬菜" category='c014'>水果PupularTab> <PupularTab tabLabel="肉禽" category='c016'>蔬菜PupularTab> <PupularTab tabLabel="水产" category='c018'>肉禽PupularTab> <PupularTab tabLabel="小厨" category='c022'>水产PupularTab> ScrollableTableView> View> ) } } class PupularTab extends Component{ constructor(props){ super(props); this.dataRepository=new DataRepository(); this.state={ result:'', dataSource:new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2}) } } componentDidMount(){ this.loadData(); } loadData(){ let url=URL let data={ 'app_id':'77U2GIRS', 'category':this.props.category, 'shop_id':'55b7aa5edc3041c3f068', 'control_app_version':'340_iOS', 'sign':'EC2CE717BCA2852DB14C3508746', 'page_index':0, 'page_size':150} let param=DataRepository.strDicToString(data) this.dataRepository.post(url,param) .then(result=>{ this.setState({ dataSource:this.state.dataSource.cloneWithRows(result.data.skus) }) }) .catch(error=>{ this.setState({ result:JSON.stringify(error) }) }) } renderRow(data){ if (data.item_type==='sku'){ return <RespositoryCell data={data} /> }else { return <RespositorySectionCell data={data} /> } } renderHeader(){ return ( <View style={{height:150}}> <Swiper style={styles.wrapper} height={150} loop={true} autoplay={true} autoplayTimeout={3} //轮播点未选中时候的样式 dot={ <View style={{width:8,height:8,backgroundColor:'#eee',borderRadius:5,margin:3}}>View> } //轮播点选中时候的样式 activeDot={ <View style={{width:8,height:8,backgroundColor:'#93b300',borderRadius:5,margin:3}}>View> } showsButtons={false}> <Image source={{uri:'https://pos.xxx.cn/static/image/product/uf/uflpplrbfk.jpg'}} style={styles.img}/> <Image source={{uri:'https://pos.xxx.cn/static/image/product/fv/fvdwrfvahh.jpg'}} style={styles.img}/> <Image source={{uri:'https://pos.xxx.cn/static/image/product/pm/pmhskiwprn.jpg'}} style={styles.img}/> Swiper> View> ) } render(){ return ( <View> <ListView dataSource={this.state.dataSource} renderRow={(data)=>this.renderRow(data)} renderHeader={()=>this.renderHeader()} /> View> ) } } const styles=StyleSheet.create({ container:{ flex:1 }, tips:{ fontSize:30 }, wrapper:{ backgroundColor:'cyan' }, img:{ width:width, height:150, } });
效果图：
