ReactNative 自定义导航栏

来源：互联网发布：手机淘宝在哪输入口令编辑：程序博客网时间：2024/05/17 22:07

自定义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,    }});

效果图：

阅读全文

0 0