自定义顶部导航栏-搜索、菜单功能

‘use strict’
import {
View,
Text,
StyleSheet,
TouchableOpacity,
TextInput
} from ‘react-native’;

import React, { Component } from ‘react’;
import {VectorIcon,Actions} from ‘c2-mobile’

class TopView extends Component {

self = this;

constructor(props) {
    super(props);

    this._onPressedRightIcon = this._onPressedRightIcon.bind(this);
    this._onPressedRightMenueIcon = this._onPressedRightMenueIcon.bind(this);
    this._onPressedSearch = this._onPressedSearch.bind(this);

    this.state = {
        title:this.props.title ? this.props.title : '',
        hideBack:this.props.hideBack ? this.props.hideBack : false,
        leftIcon:this.props.leftIcon ? this.props.leftIcon : 'angle_left',
        rightIcon:this.props.rightIcon ? this.props.rightIcon : '',
        rightText:this.props.rightText ? this.props.rightText : '',
        rightColor:this.props.rightColor ? this.props.rightColor : '#3D3D3D',
        color:this.props.color ? this.props.color : '#3D3D3D',
        rightOnPressed:this.props.rightOnPressed ? this.props.rightOnPressed : ()=>{},
        showSearchView:this.props.showSearchView ? this.props.showSearchView : false,
        search:this.props.search ? this.props.search : ()=>{},
        bottomView:this.props.bottom ? this.props.bottom : (<View></View>),
        hideLine: this.props.hideLine ? this.props.hideLine : false,
        searchInput:'',
        rightMenueIcon:this.props.rightMenueIcon ? this.props.rightMenueIcon : ''
    }
}

_onPressedSearch(){
    this.setState({
        showSearchView:false
    });
    if(this.props.search){
        this.props.search(this.state.searchInput);
    }
}

_onPressedRightIcon(){
    this.setState({
        showSearchView:true
    });
}

_onPressedRightMenueIcon(){
    if(this.props.menueOnPress){
        this.props.menueOnPress();
    }
}

renderSearchView(){
    return (
        <View style={styles.searchView}>
        {/* selectionColor='#E0E0E0' */}
            <TextInput 
                style={{flex:1,color:'#E0E0E0',padding:0}}
                underlineColorAndroid='transparent'
                defaultValue={this.state.searchInput}
                placeholder ={'请输入搜索条件'}
                onChangeText={(text)=> this.setState({searchInput:text})}>
            </TextInput>
            <TouchableOpacity onPress={this._onPressedSearch.bind(this)}  style={{paddingLeft:10,paddingRight:10}}>
                <VectorIcon name={'android-search'} style={{ fontSize: 25, color:'#E0E0E0',marginLeft:10}} />
            </TouchableOpacity>
        </View>
    );
}

renderRightView(){
    return (
        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                    <Text style={{ flex: 1, textAlign: 'center', fontSize: 18, color: this.state.color, marginRight: 10, }} numberOfLines={1}>{this.state.title}</Text>
                    {this.state.rightIcon == '' ? (<View></View>) : 
                        <TouchableOpacity onPress={this._onPressedRightIcon.bind(this)} style={{paddingLeft:10,paddingRight:10}}>
                            <VectorIcon name={this.state.rightIcon} style={{ fontSize: 25, color:this.state.rightColor}} />
                        </TouchableOpacity>
                    }
                    {
                        this.state.rightMenueIcon ? (
                            <TouchableOpacity onPress={this._onPressedRightMenueIcon.bind(this)} style={{paddingLeft:10,paddingRight:10}}>
                                <VectorIcon name={this.state.rightMenueIcon} style={{ fontSize: 25, color:this.state.rightColor}} />
                            </TouchableOpacity>
                        ) : null
                    }
                    {this.state.rightText == '' ? (<View></View>) : 
                        <TouchableOpacity style={{paddingLeft:10,paddingRight:10}}><Text style={{ fontSize: 18, color: this.state.color }} >{this.state.rightText}</Text></TouchableOpacity>
                    }
                    </View>
    );
}

render() {
    return (
        <View style={{backgroundColor: '#fff',zIndex:999}}>
                            {/* 头部标题 */}
            <View style={styles.topView}>
                <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                    {this.state.hideBack ? null : (
                    <TouchableOpacity onPress={()=> Actions.pop()} style={{padding:5}}>
                        <VectorIcon name={this.state.leftIcon} style={{ fontSize: 25, color: '#E0E0E0' }} />
                    </TouchableOpacity>)}
                    {this.state.showSearchView ? 
                    this.renderSearchView(): this.renderRightView()
                    }
                </View>
            </View>
            {this.state.bottomView}
            {this.state.hideLine ? null : <View style={{height:1,backgroundColor:'#dedede'}}></View>}
            
        </View>
    )
}

}

let styles = StyleSheet.create({
topView: {
height: 60,
backgroundColor: ‘#fff’,
flexDirection: ‘row’,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 10,
alignSelf: ‘center’
},
searchView:{
flex:1,
flexDirection:‘row’,
paddingLeft:10,
// paddingRight:10,
paddingTop:7,
paddingBottom:7,
backgroundColor:’#fff’,
justifyContent:‘center’,
alignItems:‘center’,
borderColor:’#E0E0E0’,
alignSelf:‘center’,
marginLeft:20,
marginRight:10,
borderRadius:3,
borderWidth:1
}
})

module.exports = TopView;