选择下拉菜单

版权声明：竹子原创，未经允许不得转载 https://blog.csdn.net/u010411264/article/details/80282046

TabSelectComponent.js

/**

* Create by lutn on 2018-05-04

* 选项下拉菜单选择

例子：

<TabSelectComponent data={data}

selectStyle={{

height:40,

backgroundColor:'#fff',

color:'#f00',

currentColor:'#117cf1',

fontSize:14,

}}

OK={this._OKfn}

/>

样式和默认值说明：

(1)头部样式

selectStyle：{

height = 40;//高度

backgroundColor='#fff';//背景颜色

textColor = '#666';//字体颜色

textTempColor = '#666';

currentColor = '#117cf1';//当前 激活颜色

fontSize = 12;//字体大小

borderColor = '#E5E5E5';//边框颜色

borderBottomWidth = 1;//边框宽度

inLineColor = '#E5E5E5';//分隔线颜色

inLineWidth = 1;//分隔线宽度

triangleHeight = 7;//三角形高度

triangleWidth =12; //三角形宽度

}

(2)选项样式

optionStyle{

}

(3)按钮样式

buttonStyle{

height = 50;//高度

backgroundColor = '#fff'; //背景颜色

leftButtonBC = '#f5f5f5'; //左边按钮背景颜色

rightButtonBC = '#117cf1'; //右边按钮背景颜色

fontSize = 18; //字体大小

leftTextColor = '#666';//左边按钮字体颜色

rightTextColor = '#666';//右边按钮字体颜色

buttonWidth = 150; //按钮宽度

borderRadius = 5; //圆角

buttonPaddingUpDown = 5; //上下padding

}

数据例子：json格式

data={

"title": "区域",

"type":"2",

"name":"区域",

"selectRoot":

[

{"key": "000","value": "全国","selected": false, "child":[{"key": "0011","value": "全部","selected": false}]},

{"key": "001","value": "北京","selected": false, "child":[

{"key": "0011","value": "全部","selected": false},

{"key": "0011","value": "市区","selected": false},

{"key": "0011","value": "丰台","selected": false},

{"key": "0011","value": "大兴","selected": true},

{"key": "0011","value": "密云","selected": false},

{"key": "0011","value": "平谷","selected": false}

]},

{"key": "001","value": "天津","selected": false, "child":[

{"key": "0011","value": "全部","selected": false},

{"key": "0011","value": "和平区","selected": false},

{"key": "0011","value": "城厢区","selected": false},

{"key": "0011","value": "河北区","selected": true},

{"key": "0011","value": "河东区","selected": false},

{"key": "0011","value": "红桥区","selected": false}

]},

{"key": "001","value": "河北","selected": false, "child":[

{"key": "0011","value": "全部","selected": false},

{"key": "0011","value": "石家庄","selected": false},

{"key": "0011","value": "唐山","selected": false},

{"key": "0011","value": "秦皇岛","selected": true},

{"key": "0011","value": "邯郸","selected": false},

{"key": "0011","value": "邢台","selected": false}

]},

{"key": "001","value": "山西","selected": true, "child":[

{"key": "0011","value": "全部","selected": false},

{"key": "0011","value": "大同","selected": false},

{"key": "0011","value": "朔州","selected": false},

{"key": "0011","value": "忻州","selected": true},

{"key": "0011","value": "阳泉","selected": false},

{"key": "0011","value": "吕梁","selected": false}

]},

{"key": "001","value": "内蒙古","selected": false,"child":[

{"key": "0011","value": "全部","selected": false},

{"key": "0011","value": "包头","selected": false},

{"key": "0011","value": "乌海","selected": false},

{"key": "0011","value": "赤峰","selected": true},

{"key": "0011","value": "呼伦贝尔","selected": false},

{"key": "0011","value": "乌兰察布","selected": false}

]}

]

}]

*/

'use strict';

import React, {

Component

} from 'react';

import {

NativeModules, StyleSheet, Dimensions, View, Text,

Image, ListView, TouchableWithoutFeedback, TouchableOpacity,

Modal, ActivityIndicator, Button, ScrollView, PixelRatio, ART

} from 'react-native';

import PropTypes from 'prop-types'; //类型检验组件

const { Surface, Shape, Path, Group} = ART; //图像

const { width, height} = Dimensions. get( 'window'); //手机屏幕宽高

const LINE = 1 / PixelRatio. get();

export default class TabSelectComponent extends Component {

/**

* 构造函数

*/

constructor( props) {

super( props);

this. _buttonFrame = null; //按钮画布位置信息

this. state = {

visible: false, //是否显示背景

index: null, //当前需要显示的下拉选项

data: this. props. data, //数据

showDropdown: false, //是否显示下拉菜单

};

}

/**props默认*/

static defaultProps = {

data: null, //数据

selectStyle: null, //头部样式

optionStyle: null, //选项样式

buttonStyle: null, //按钮样式

OK: null, //确定按钮

seletIcon: null, //选中打钩图标

}

/**

* props类型验证

*/

static propTypes = {

data:PropTypes. array,

selectStyle:PropTypes. oneOfType([ PropTypes. number, PropTypes. object, PropTypes. array]), //头部样式

optionStyle:PropTypes. oneOfType([ PropTypes. number, PropTypes. object, PropTypes. array]), //选项样式

buttonStyle:PropTypes. oneOfType([ PropTypes. number, PropTypes. object, PropTypes. array]), //按钮样式

OK:PropTypes. func, //确定按钮

seletIcon:PropTypes. node, //选中打钩图标

}

render() {

return (

< View >

{this. canvas() }

</ View >

);

}

/**

* 画布

*/

canvas = () =>{

let all = new Array();

let header = this. selectHeader( this. state. index);

let haderYes = ( < View ></ View >);

if(! this. state. visible){

all. push( header);

} else{

haderYes = header;

}

if( this. _buttonFrame && this. state. index != null){

let frameStyle = this. _calcPosition(); //计算位置

all. push(

< Modal key= { "$modal" }

animationType= { 'fade' }

transparent= {true}

visible= {this. state. visible }

onRequestClose= {() =>{ this. _onRequestClose( false)} } >

< TouchableWithoutFeedback style= {{ backgroundColor: '#fff'} } onPress= {() =>{ this. hide()} } >

< View style= {[{ backgroundColor: 'rgba(0, 0, 0, 0.5)', flex: 1,}] } >

< View style= {{ backgroundColor: '#fff'} } > { haderYes } </ View >

< View style= {[ frameStyle,] } >

{this. _chooseContent( this. state. index) }

</ View >

</ View >

</ TouchableWithoutFeedback >

</ Modal >

);

}

return all;

}

/**

* 下拉头部

* @memberof Select

*/

selectHeader = ( index) =>{

let styles = this. _getSelectStyle(); //获取头部样式

if( this. state. data != null){

let header = new Array();

let len = this. state. data. length;

let dividingLine = 0;

if( len > 4 ){

dividingLine = 3;

} else if( 0 < len <= 4 ){

dividingLine = len - 1;

}

let selected = false;

for( let i = 0; i < dividingLine + 1 ; i++ ){

if( index != null && index == i){

styles. textColor = styles. currentColor;

selected = false;

} else{

selected = true;

styles. textColor = styles. textTempColor;

}

header. push(

< View key= { i } style= {[{ flex: 1, height:styles. height,}] } >

< TouchableOpacity ref= { button => this. _button = button } onPress= {() =>this. chooseButton( true, i) } >

< View style= {[{ height:styles. height, alignItems: 'center', justifyContent: 'center',}] } >

< View style= {[{ height:styles. height- 20, alignItems: 'center', justifyContent: 'center', flexDirection: 'row',

}] } >

< Text style= {[{ textAlign: 'center', color:styles. textColor, fontSize:styles. fontSize}] } >

{

len > 4 ?

i < 3 ? this. state. data[ i]. title: '更多'

:

this. state. data[ i]. title

}

</ Text >

< Triangle color= { styles. textColor } selected= { selected } width= { styles. triangleWidth }

height= { styles. triangleHeight } />

</ View >

</ View >

</ TouchableOpacity >

</ View >

);

if( i != dividingLine){

header. push( < View key= { i+ 'c' } style= {{ height: 30, borderRightColor:styles. inLineColor, borderRightWidth:styles. inLineWidth,} } ></ View >);

}

}

return( < View key= { "$header" } >

< View style= {[{ flexDirection: 'row', height:styles. height, backgroundColor:styles. backgroundColor,

borderColor:styles. borderColor, borderBottomWidth:styles. borderWidth,

borderTopWidth:styles. borderWidth, alignItems: 'center', justifyContent: 'center',

}] } >

{ header }

</ View >

</ View >);

}

}

/**

*

* 选择显示下拉内容

* @param {any} index tab标签

* @returns

* @memberof Select

*/

_chooseContent( tabIndex){

let tab = this. state. data[ tabIndex]; //取到当前tab

if( tabIndex != null && ( tab != null && tab != undefined) && this. state. showDropdown){

let allContents = new Array();

let contents = new Array();

if( this. state. data != null ){

if( tabIndex == 3){

if( this. state. data. length > 4){

for( let i = tabIndex; i < this. state. data. length; i++ ){

contents. push( this. _blockSelect( i));

}

} else{

contents = this. _chooseTab( tabIndex);

}

} else{

contents = this. _chooseTab( tabIndex);

}

}

allContents. push(

< View key= "$selectScrollView001" >

< ScrollView >

{ contents }

</ ScrollView >

</ View >

);

allContents. push( this. _findButton()); /** 按钮 */

return allContents;

}

return ( < View ></ View >);

}

/**

* 选择tab显示内容

* @param {*} index

*/

_chooseTab( tabIndex){

let option = new Array();

switch( this. state. data[ tabIndex]. type){ //显示模式选择

case "0" : //简单下拉

option. push( this. _defaultSelect( tabIndex));

break;

case "1" : //块式下拉

option. push(

this. _blockSelect( tabIndex)

);

break;

case "2" : //二级下拉

option. push(

this. _secondSelect( tabIndex)

);

break;

default: option. push( this. _defaultSelect( tabIndex));;

}

return option;

}

/**

* 默认的列表 基本下拉列表

* @param index tab下标

* @memberof Select

*/

_defaultSelect( tabIndex){

let styles = this. _getOptionStyle(); //获取选项样式

let list = this. state. data[ tabIndex]. selectRoot; //取到当前tab

let option = new Array();

let textColor = '#666';

for( let i = 0; i < list. length; i++ ){

if( list[ i]. selected ){

textColor = '#117cf1';

} else{

textColor = '#666';

}

option. push(

< TouchableOpacity key= { 'op$'+ i } activeOpacity= { 1 } onPress= {() =>this. selected( tabIndex, i, null) } >

< View style= {{ backgroundColor: '#fff'} } >

< View style= {{ flexDirection: 'row', height:styles. lineHeight, alignItems: 'center',

borderBottomWidth: 1, borderColor: '#f5f5f5'} } >

< View style= {{ flex: 0.7,} } >

< Text style= {{ marginLeft: 14, fontSize:styles. fontSize, color:textColor} } > { list[ i]. value } </ Text >

</ View >

< View style= {{ flex: 0.3, flexDirection: 'row', justifyContent: 'flex-end', marginRight: 14,} } >

{

list[ i]. selected ?

< View >

{

this. props. seletIcon ?

< Image

source= {this. props. seletIcon }

style= {[{

height: 14,

width: 20,

}] } />

:

< CheckSelected color= { textColor } />

}

</ View >

:

< View ></ View >

}

</ View >

</ View >

</ View >

</ TouchableOpacity >

);

}

return option;

}

/**

*

* 块式下拉列表

* @param {any} tabIndex tab下标

* @returns

* @memberof Select

*/

_blockSelect( tabIndex){

let styles = this. _getOptionStyle(); //获取选项样式

let tab = this. state. data[ tabIndex]; //取到当前tab

let list = this. state. data[ tabIndex]. selectRoot; //取到当前tab

let contents = new Array();

let option = new Array();

let textColor = '#fff';

for( let i = 0; i < list. length; i++ ){

if( list[ i]. selected ){

textColor = '#117cf1';

} else{

textColor = '#fff';

}

option. push(

< TouchableOpacity key= { 'op$'+ i } activeOpacity= { 1 } onPress= {() =>this. selected( tabIndex, i, null) } >

< View style= {[{ height:styles. lineHeight, width: 90, backgroundColor:textColor, marginRight: 15,

justifyContent: 'center', alignItems: 'center', borderRadius: 5, marginBottom: 10,}] } >

< Text style= {[{ fontSize:styles. fontSize,}] } > { list[ i]. value } </ Text >

</ View >

</ TouchableOpacity >

);

}

contents. push(

< View key= { 'op$111' } style= {{ backgroundColor: '#fff', paddingBottom: 20,

borderBottomWidth: 1, borderColor: '#f5f5f5'} } >

< View style= {{ marginLeft: 14, marginRight: 14,} } >

< View style= {{ marginTop: 20, marginBottom: 20,} } >

< Text style= {[{ fontSize:styles. fontSize,}] } > { tab. name } </ Text >

</ View >

< View style= {[{ flexDirection: 'row', flexWrap: 'wrap',}] } >

{ option }

</ View >

</ View >

</ View >

);

return contents;

}

/**

* 二级下拉列表

* @param {any} tabIndex tab下标

* @memberof Select

*/

_secondSelect( tabIndex){

let styles = this. _getOptionStyle(); //获取选项样式

let tab = this. state. data[ tabIndex]; //取到当前tab

let list = this. state. data[ tabIndex]. selectRoot; //取到当前根列表

let contents = new Array(); //内容

let textColor = '#fff'; //字体颜色

let optionBc = '#f5f5f5'; //选项背景

let option = new Array(); //一级列表

let option2 = new Array(); //二级列表

for( let i = 0; i < list. length; i++ ){

if( list[ i]. selected ){

textColor = '#117cf1';

optionBc = '#fff';

let optionList = list[ i]. child;

if( optionList != null && optionList != undefined){

for( let j = 0; j < optionList. length; j++ ){

option2. push(

< TouchableOpacity key= { 'op2$'+ j } activeOpacity= { 1 } onPress= {() =>this. selected( tabIndex, i, j) } >

< View style= {{ backgroundColor: '#fff', flexDirection: 'row', height:styles. lineHeight, alignItems: 'center',} } >

< View style= {{ flex: 0.7} } >

< Text style= {[{ marginLeft: 20, color:styles. textColor}] } > { optionList[ j]. value } </ Text >

</ View >

< View style= {{ flex: 0.3, flexDirection: 'row', justifyContent: 'flex-end', marginRight: 14,} } >

{

optionList[ j]. selected ?

< View >

{

this. props. seletIcon ?

< Image

source= {this. props. seletIcon }

style= {[{

height: 14,

width: 20,

}] } />

:

< CheckSelected color= { textColor } />

}

</ View >

:

< View ></ View >

}

</ View >

</ View >

</ TouchableOpacity >

);

}

}

} else{

textColor = '#fff';

optionBc = '#f5f5f5';

}

option. push(

< TouchableOpacity key= { 'op$'+ i } activeOpacity= { 1 } onPress= {() =>this. selected( tabIndex, i, null) } >

< View style= {[{ flexDirection: 'row', backgroundColor:optionBc, height:styles. lineHeight, alignItems: 'center',}] } >

< View style= {{ flexDirection: 'row', justifyContent: 'flex-start',} } >

< Text style= {{ width: 3, height:styles. lineHeight- 10, backgroundColor:textColor, marginLeft: 0, color:styles. textColor} } ></ Text >

</ View >

< View style= {[{ width: 107, justifyContent: 'center', alignItems: 'center',}] } >

< Text style= {[{ fontSize:styles. fontSize, color:styles. textColor}] } > { list[ i]. value } </ Text >

</ View >

</ View >

</ TouchableOpacity >

);

}

contents. push(

< View key= { 'op$222' } style= {{ backgroundColor: '#fff',

borderBottomWidth: 1, borderColor: '#f5f5f5', flexDirection: 'row'} } >

< View style= {[{ width: 110, backgroundColor: '#f5f5f5'}] } >

{ option }

</ View >

< View style= {[{ width:width- 110, backgroundColor: '#fff'}] } >

{ option2 }

</ View >

</ View >

);

return contents;

}

/**

* 确定(搜索)和重置按钮

* @returns View

* @memberof Select

*/

_findButton(){

let styles = this. _getButtonStyle(); //获取样式

return(

< View key= { "bn$02" } style= {{ justifyContent: 'center', alignItems: 'center',} } >

< View style= {{ flexDirection: 'row', backgroundColor:styles. backgroundColor,

height:styles. height, justifyContent: 'center', alignItems: 'center'} } >

< View style= {{ flex: 0.5, alignItems: 'center'} } >

< TouchableOpacity style= {{ backgroundColor:styles. leftButtonBC,

justifyContent: 'center', alignItems: 'center',

borderRadius: styles. borderRadius,

width:styles. buttonWidth,

paddingTop:styles. buttonPaddingUpDown, paddingBottom:styles. buttonPaddingUpDown,} }

onPress= {() => { this. _reset()} } >

< Text style= {{ fontSize:styles. fontSize, color:styles. leftTextColor } } >重置 </ Text >

</ TouchableOpacity >

</ View >

< View style= {{ flex: 0.5, alignItems: 'center'} } >

< TouchableOpacity style= {{ backgroundColor:styles. rightButtonBC,

justifyContent: 'center', alignItems: 'center',

borderRadius: styles. borderRadius,

width:styles. buttonWidth,

paddingTop:styles. buttonPaddingUpDown, paddingBottom:styles. buttonPaddingUpDown,} }

onPress= {() =>{ this. _OKFn()} } >

< Text style= {{ fontSize:styles. fontSize, color:styles. rightTextColor} } >确定 </ Text >

</ TouchableOpacity >

</ View >

</ View >

</ View >

);

}

/**

* 确实按钮

* @memberof Select

*/

_OKFn(){

if( this. props. OK != null){

this. props. OK( this. state. data);

}

//关掉下拉

this. setState({

showDropdown: false,

visible: false,

});

}

/**

*

* @memberof Select

*/

_reset(){

let data = this. state. data;

if( data != null){

for( let i = 0; i < data. length; i++){

if( data[ i]. selectRoot != null){

for( let j = 0; j < data[ i]. selectRoot. length; j++){

if( data[ i]. selectRoot[ j]. selected){

data[ i]. selectRoot[ j]. selected = false;

}

if( data[ i]. selectRoot[ j]. child != null){

for( let k = 0; k < data[ i]. selectRoot[ j]. child. length; k++ ){

if( data[ i]. selectRoot[ j]. child[ k]. selected){

data[ i]. selectRoot[ j]. child[ k]. selected = false;

}

}

}

}

}

}

}

this. setState({

data: data,

});

}

/**

* 选择事件

* @param {any} tabIndex tab下标

* @param {any} selectIndex 一级数组下标

* @param {any} childIndex 二级数组下标

*/

selected = ( tabIndex, selectIndex, childIndex) => {

if( childIndex == null || childIndex == undefined){ //一级列表

if( this. state. data != null){

let data = this. state. data;

let tab = data[ tabIndex];

let optionList = tab. selectRoot;

for( let i = 0; i < optionList. length; i++){

optionList[ i]. selected = false;

}

optionList[ selectIndex]. selected = true;

data[ tabIndex]. selectRoot = optionList;

this. setState({

data: data,

});

}

} else{ //二级列表

if( this. state. data != null){

let data = this. state. data;

let tab = data[ tabIndex];

let option1 = tab. selectRoot[ selectIndex];

let option2 = option1. child[ childIndex];

let selected = option2. selected;

if( selected){

option2. selected = false;

} else{

option2. selected = true;

}

data[ tabIndex]. selectRoot[ selectIndex]. child[ childIndex] = option2;

this. setState({

data: data,

});

}

}

}

/**

* 获取头部样式

* @memberof TabSelectComponent

*/

_getSelectStyle(){

let height = 40; //高度

let backgroundColor= '#fff'; //背景颜色

let textColor = '#666'; //字体颜色

let textTempColor = '#666';

let currentColor = '#117cf1'; //当前 激活颜色

let fontSize = 12; //字体大小

let borderColor = '#E5E5E5'; //边框颜色

let borderWidth = 1; //边框宽度

let inLineColor = '#E5E5E5'; //分隔线颜色

let inLineWidth = 1; //分隔线宽度

let triangleHeight = 7; //三角形高度

let triangleWidth = 12; //三角形宽度

if( this. props. selectStyle != null && this. props. selectStyle != undefined){

height = this. _isEmpty( StyleSheet. flatten( this. props. selectStyle). height) ? 40

: StyleSheet. flatten( this. props. selectStyle). height;

backgroundColor = this. _isEmpty( StyleSheet. flatten( this. props. selectStyle). backgroundColor)? '#fff'

: StyleSheet. flatten( this. props. selectStyle). backgroundColor;

textTempColor = this. _isEmpty( StyleSheet. flatten( this. props. selectStyle). color)? '#666'

: StyleSheet. flatten( this. props. selectStyle). color;

textColor = textTempColor;

fontSize = this. _isEmpty( StyleSheet. flatten( this. props. selectStyle). fontSize)? 12

: StyleSheet. flatten( this. props. selectStyle). fontSize;

borderColor = this. _isEmpty( StyleSheet. flatten( this. props. selectStyle). borderColor)? '#E5E5E5'

: StyleSheet. flatten( this. props. selectStyle). borderColor;

borderWidth = this. _isEmpty( StyleSheet. flatten( this. props. selectStyle). borderWidth)? 1

: StyleSheet. flatten( this. props. selectStyle). borderWidth;

inLineColor = this. _isEmpty( StyleSheet. flatten( this. props. selectStyle). inLineColor)? '#E5E5E5'

: StyleSheet. flatten( this. props. selectStyle). inLineColor;

inLineWidth = this. _isEmpty( StyleSheet. flatten( this. props. selectStyle). inLineWidth)? 1

: StyleSheet. flatten( this. props. selectStyle). inLineWidth;

let triangleHeight = this. _isEmpty( StyleSheet. flatten( this. props. selectStyle). triangleHeight)? 7

: StyleSheet. flatten( this. props. selectStyle). triangleHeight;

let triangleWidth = this. _isEmpty( StyleSheet. flatten( this. props. selectStyle). triangleWidth)? 12

: StyleSheet. flatten( this. props. selectStyle). triangleWidth;

}

return {

"height" : height,

"backgroundColor" : backgroundColor,

"textColor" : textColor,

"textTempColor" : textTempColor,

"currentColor" : currentColor,

"fontSize" : fontSize,

"borderWidth" :borderWidth,

"borderColor" : borderColor,

"inLineColor" : inLineColor,

"inLineWidth" : inLineWidth,

"triangleHeight" :triangleHeight,

"triangleWidth" : triangleWidth

}

}

/**

* 获取下拉选项样式

* @returns

* @memberof TabSelectComponent

*/

_getOptionStyle(){

let lineHeight = 35; //行高

let fontSize = 14; //字体

let textColor = '#666'; //字体颜色

let titleColor = '#666' //标题颜色

if( this. props. optionStyle != null && this. props. optionStyle != undefined){

lineHeight = this. _isEmpty( StyleSheet. flatten( this. props. selectStyle). lineHeight) ? 40

: StyleSheet. flatten( this. props. selectStyle). lineHeight;

fontSize = this. _isEmpty( StyleSheet. flatten( this. props. selectStyle). fontSize) ? 14

: StyleSheet. flatten( this. props. selectStyle). fontSize;

textColor = this. _isEmpty( StyleSheet. flatten( this. props. selectStyle). textColor) ? '#666'

: StyleSheet. flatten( this. props. selectStyle). textColor;

titleColor = this. _isEmpty( StyleSheet. flatten( this. props. selectStyle). titleColor) ? '#666'

: StyleSheet. flatten( this. props. selectStyle). titleColor;

}

return {

"lineHeight" : lineHeight,

"fontSize" :fontSize,

"textColor" :textColor,

"titleColor" :titleColor

} ;

}

/**

* 获取按钮样式

* @memberof TabSelectComponent

*/

_getButtonStyle(){

let height = 50; //高度

let backgroundColor = '#fff'; //背景颜色

let leftButtonBC = '#f5f5f5'; //左边按钮背景颜色

let rightButtonBC = '#117cf1'; //右边按钮背景颜色

let fontSize = 18; //字体大小

let leftTextColor = '#666'; //左边按钮字体颜色

let rightTextColor = '#666'; //右边按钮字体颜色

let buttonWidth = 150; //按钮宽度

let borderRadius = 5; //圆角

let buttonPaddingUpDown = 5; //上下padding

if( this. props. buttonStyle != null && this. props. buttonStyle != undefined){

height = this. _isEmpty( StyleSheet. flatten( this. props. buttonStyle). height) ? 50

: StyleSheet. flatten( this. props. buttonStyle). height;

backgroundColor = this. _isEmpty( StyleSheet. flatten( this. props. buttonStyle). backgroundColor) ? '#fff'

: StyleSheet. flatten( this. props. buttonStyle). backgroundColor;

leftButtonBC = this. _isEmpty( StyleSheet. flatten( this. props. buttonStyle). leftButtonBC) ? '#f5f5f5'

: StyleSheet. flatten( this. props. buttonStyle). leftButtonBC;

fontSize = this. _isEmpty( StyleSheet. flatten( this. props. buttonStyle). fontSize) ? 18

: StyleSheet. flatten( this. props. buttonStyle). fontSize;

leftTextColor = this. _isEmpty( StyleSheet. flatten( this. props. buttonStyle). leftTextColor) ? '#666'

: StyleSheet. flatten( this. props. buttonStyle). leftTextColor;

rightTextColor = this. _isEmpty( StyleSheet. flatten( this. props. buttonStyle). rightTextColor) ? '#fff'

: StyleSheet. flatten( this. props. buttonStyle). rightTextColor;

buttonWidth = this. _isEmpty( StyleSheet. flatten( this. props. buttonStyle). buttonWidth) ? 150

: StyleSheet. flatten( this. props. buttonStyle). buttonWidth;

buttonPaddingUpDown = this. _isEmpty( StyleSheet. flatten( this. props. buttonStyle). buttonPaddingUpDown) ? 5

: StyleSheet. flatten( this. props. buttonStyle). buttonPaddingUpDown;

}

return {

"height" :height,

"backgroundColor" :backgroundColor,

"leftButtonBC" :leftButtonBC,

"rightButtonBC" :rightButtonBC,

"fontSize" :fontSize,

"leftTextColor" :leftTextColor,

"rightTextColor" :rightTextColor,

"buttonWidth" :buttonWidth,

"borderRadius" :borderRadius,

"buttonPaddingUpDown" :buttonPaddingUpDown

};

}

/**

* 选择Tab事件

* @param visible 是否显示

* @param index tab下标

* @memberof Select

*/

chooseButton = ( visible, index) =>{

this. show( index);

}

/**

* 显示下拉

* @param index 需要显示的下拉下标

* @memberof Select

*/

show = ( index) => {

//更新画布位置 并确定tab下标和是否显示

this. _updatePosition(() => {

this. setState({

visible: true,

index:index,

showDropdown: true,

});

});

}

/**隐藏下拉 */

hide = () => {

this. setState({ visible: false });

}

/**

* 更新画布位置

*/

_updatePosition = ( callback) => {

if ( this. _button && this. _button. measure) {

this. _button. measure(( fx, fy, width, height, px, py) => {

this. _buttonFrame = { x: px, y: py, w: width, h: height}; //下拉按钮的位置信息

console. log( "fx="+ fx + "|fy="+ fy+ "|width="+ width+ "|height="+ height + "|px="+ px + "|py=" + py);

callback && callback(); //设置显示

});

}

}

/**

* 计算画布位置

* return style={

height,top,left,width,right

}

*/

_calcPosition() {

var style = {

top: 0, //默认高度

height:height- 200, //默认最高

}

return style;

}

_isEmpty( obj){

if( obj != null && obj != undefined && obj != ""){

return false;

}

return true;

};

}

/**

* 三角形图标

* @class Triangle

* @extends {React.Component}

*/

class Triangle extends React. Component {

/**

* 构造函数

*/

constructor( props) {

super( props);

}

/**props默认*/

static defaultProps = {

selected: false, //是否选中

color: '#e5e5e5', //下三角填充颜色

width: 12, //宽

height: 7, //高

}

/**

* props类型验证

*/

static propTypes = {

selected:PropTypes. bool, //是否选中

color:PropTypes. string, //下三角填充颜色

width:PropTypes. number, //宽

height:PropTypes. number, //高

}

render() {

let path;

if ( this. props. selected) {

path = new Path()

. moveTo( this. props. width / 2, 0)

. lineTo( 0, this. props. height)

. lineTo( this. props. width, this. props. height)

. close();

} else {

path = new Path()

. moveTo( 0, 0)

. lineTo( this. props. width, 0)

. lineTo( this. props. width / 2, this. props. height)

. close();

}

return (

< View style= {[{ marginLeft: 2}] } >

< Surface width= {this. props. width } height= {this. props. height } >

< Shape d= { path } stroke= "#00000000" fill= {this. props. color } strokeWidth= { 0 } />

</ Surface >

</ View >

)

}

}

/**

*

* 选中

* @class Cheack

* @extends {React.Component}

*/

class CheckSelected extends React. Component {

/**

* 构造函数

*/

constructor( props) {

super( props);

}

/**props默认*/

static defaultProps = {

color: '#117cf1', //填充颜色

}

/**

* props类型验证

*/

static propTypes = {

color:PropTypes. string, //填充颜色

}

render(){

return( < View >

< Surface

width= { 18 }

height= { 12 }

>

< Group scale= { 0.03 } >

< Shape

fill= {this. props. color }

d= { `M494,52c-13-13-33-13-46,0L176,324L62,211c-13-13-33-13-46,0s-13,33,0,46l137,136c6,6,15,10,23,10s17-4,23-10L494,99C507,86,507,65,494,52z` }

/>

</ Group >

</ Surface >

</ View >);

}

}

/**

* 样式

*/

const styles = StyleSheet. create({

});

可以再次封装

TabMenu.js

/**

* Create by lutn on 2018-05-11

* tab下拉选择菜单

*/

import React,{ Component} from 'react';

import { StyleSheet, View, Text} from 'react-native';

import PropTypes from 'prop-types'; //类型检验组件

import TabSelectComponent from '../components/TabSelectComponent'

export default class TabMenu extends Component {

constructor( props){

super( props);

};

/**props默认*/

static defaultProps = {

data: null, //数据

selectStyle: null, //头部样式

optionStyle: null, //选项样式

buttonStyle: null, //按钮样式

OK: null, //确定按钮

seletIcon: null, //打钩图标

};

/**props类型验证 */

static propTypes = {

data:PropTypes. array,

selectStyle:PropTypes. oneOfType([ PropTypes. number, PropTypes. object, PropTypes. array]), //头部样式

optionStyle:PropTypes. oneOfType([ PropTypes. number, PropTypes. object, PropTypes. array]), //选项样式

buttonStyle:PropTypes. oneOfType([ PropTypes. number, PropTypes. object, PropTypes. array]), //按钮样式

OK:PropTypes. func, //确定按钮

seletIcon:PropTypes. node,

}

render() {

return (

< View >

< TabSelectComponent

data= {this. props. data }

selectStyle= {this. props. selectStyle }

optionStyle= {this. props. optionStyle }

buttonStyle= {this. props. buttonStyle }

seletIcon= {this. props. seletIcon }

OK= {this. props. OK }

/>

</ View >

);

}

}

数据：

const data = [
  {
    "title": "区域",
    "type":"2",
    "name":"区域",
    "selectRoot": 
      [
        {"key": "000","value": "全国","selected": false, "child":[]}, 
        {"key": "001","value": "北京","selected": false, "child":[
          {"key": "0011","value": "全部","selected": false},
          {"key": "0011","value": "市区","selected": false},
          {"key": "0011","value": "丰台","selected": false},
          {"key": "0011","value": "大兴","selected": true},
          {"key": "0011","value": "密云","selected": false},
          {"key": "0011","value": "平谷","selected": false}
        ]}, 
        {"key": "001","value": "天津","selected": false, "child":[
          {"key": "0011","value": "全部","selected": false},
          {"key": "0011","value": "和平区","selected": false},
          {"key": "0011","value": "城厢区","selected": false},
          {"key": "0011","value": "河北区","selected": true},
          {"key": "0011","value": "河东区","selected": false},
          {"key": "0011","value": "红桥区","selected": false}
        ]}, 
        {"key": "001","value": "河北","selected": false, "child":[
          {"key": "0011","value": "全部","selected": false},
          {"key": "0011","value": "石家庄","selected": false},
          {"key": "0011","value": "唐山","selected": false},
          {"key": "0011","value": "秦皇岛","selected": true},
          {"key": "0011","value": "邯郸","selected": false},
          {"key": "0011","value": "邢台","selected": false}
        ]}, 
        {"key": "001","value": "山西","selected": true, "child":[
          {"key": "0011","value": "全部","selected": false},
          {"key": "0011","value": "大同","selected": false},
          {"key": "0011","value": "朔州","selected": false},
          {"key": "0011","value": "忻州","selected": true},
          {"key": "0011","value": "阳泉","selected": false},
          {"key": "0011","value": "吕梁","selected": false}
        ]}, 
        {"key": "001","value": "内蒙古","selected": false,"child":[
          {"key": "0011","value": "全部","selected": false},
          {"key": "0011","value": "包头","selected": false},
          {"key": "0011","value": "乌海","selected": false},
          {"key": "0011","value": "赤峰","selected": true},
          {"key": "0011","value": "呼伦贝尔","selected": false},
          {"key": "0011","value": "乌兰察布","selected": false}
        ]}
      ]
  },
  {
    "title": "行业",
    "type":"0",
    "name":"行业",
    "selectRoot": 
      [
        {"key": "000","value": "不限","selected": false, "child":[]}, 
        {"key": "001","value": "教育","selected": false, "child":[]}, 
        {"key": "001","value": "建筑业","selected": false, "child":[]}, 
        {"key": "001","value": "金融业","selected": false, "child":[]}, 
        {"key": "001","value": "制造业","selected": true, "child":[]}, 
        {"key": "001","value": "批发和零售业","selected": false, "child":[]}, 
        {"key": "001","value": "卫生和社会工作页","selected": false, "child":[]}
      ]
  }, 
  {
    "title": "类型",
    "type":"1",
    "name":"公告类型",
    "selectRoot": 
      [
        {"key": "000","value": "不限","selected": false, "child":[]}, 
        {"key": "001","value": "需求公告","selected": false, "child":[]}, 
        {"key": "001","value": "招标公告","selected": true, "child":[]},
        {"key": "001","value": "变更公告","selected": false, "child":[]}, 
        {"key": "001","value": "中变公告","selected": false,"child":[]}, 
        {"key": "001","value": "中止公告","selected": false,"child":[]}, 
        {"key": "001","value": "成交公告","selected": false,"child":[]},
        {"key": "001","value": "合同公告","selected": false,"child":[]}
      ]
  }, 
  {
    "title": "预算金额",
    "type":"0",
    "name":"预算金额（万）",
    "selectRoot": 
      [
        {"key": "000","value": "不限","selected": false, "child":[]}, 
        {"key": "001","value": "100万以下","selected": false, "child":[]}, 
        {"key": "001","value": "100万~300万","selected": true, "child":[]},
        {"key": "001","value": "300万~500万","selected": false, "child":[]}, 
        {"key": "001","value": "500万~1000万","selected": false, "child":[]}, 
        {"key": "001","value": "1000万~3000万","selected": false, "child":[]}, 
        {"key": "001","value": "3000万~5000万","selected": false, "child":[]},
        {"key": "001","value": "5000万~8000万","selected": false, "child":[]},
        {"key": "001","value": "8000万以上","selected": false, "child":[]}
      ]
  },
  {
    "title": "发布时间",
    "type":"0",
    "name":"发布时间（年）",
    "selectRoot": 
      [
        {"key": "000","value": "不限","selected": false, "child":[]}, 
        {"key": "001","value": "2018年","selected": false, "child":[]}, 
        {"key": "001","value": "2017年","selected": true, "child":[]},
        {"key": "001","value": "2016年","selected": false, "child":[]}, 
        {"key": "001","value": "2015年","selected": false, "child":[]}, 
        {"key": "001","value": "2014年","selected": false, "child":[]}
      ]
  },
  {
    "title": "发布时间",
    "type":"0",
    "name":"发布时间（年）",
    "selectRoot": 
      [
        {"key": "000","value": "不限","selected": false, "child":[]}, 
        {"key": "001","value": "2018年","selected": false, "child":[]}, 
        {"key": "001","value": "2017年","selected": true, "child":[]},
        {"key": "001","value": "2016年","selected": false, "child":[]}, 
        {"key": "001","value": "2015年","selected": false, "child":[]}, 
        {"key": "001","value": "2014年","selected": false, "child":[]}
      ]
  }
  ,
  {
    "title": "发布时间",
    "type":"0",
    "name":"发布时间（年）",
    "selectRoot": 
      [
        {"key": "000","value": "不限","selected": false, "child":[]}, 
        {"key": "001","value": "2018年","selected": false, "child":[]}, 
        {"key": "001","value": "2017年","selected": true, "child":[]},
        {"key": "001","value": "2016年","selected": false, "child":[]}, 
        {"key": "001","value": "2015年","selected": false, "child":[]}, 
        {"key": "001","value": "2014年","selected": false, "child":[]}
      ]
  }
]

结果：