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

效果图：