RN 下拉列表

1. 安装 npm i react-native-modal-dropdown --save
2. import ModalDropdown from 'react-native-modal-dropdown';
3. 使用 <ModalDropdown options={['option 1', 'option 2']}/>
   4.github：https://github.com/sohobloo/react-native-modal-dropdown

---

自己写的工具列

import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Image,
TouchableOpacity,
Dimensions,
TouchableHighlight
} from 'react-native';
import ModalDropdown from 'react-native-modal-dropdown';
// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');

export default class DropDown extends Component {

constructor(props) {
    super(props)
    this.state = {
        isshow: false
    }
}
render() {
    return (
        <View style={styles.container}>
            <ModalDropdown
                style={styles.dropdown}
                //下拉样式
                dropdownStyle={styles.dropdown_dropdown}
                //文字样式
                textStyle={styles.dropdown_text}
                //每一行
                renderRow={this._dropdown_renderRow.bind(this)}
                onDropdownWillShow={this._dropdown_willShow.bind(this)}
                onDropdownWillHide={this._dropdown_willHide.bind(this)}
                defaultValue={'2018年'}
                options={['2018年', '2019年', '2020年']} />

            <Image
                source={this.state.isshow ? require('../../img/ico_down.png') : require('../../img/ico_up.png')} style={styles.imgIcon} ></Image>

        </View>
    );
}
/**
* 每一行渲染
*/
_dropdown_renderRow(rowData, rowID, highlighted) {
    let evenRow = rowID % 2;
    return (
        <TouchableHighlight underlayColor='cornflowerblue'>
            <View style={[styles.dropdown_row, highlighted && { backgroundColor: '#a5d2f2' }]}>

                <Text style={[styles.dropdown_row_text, highlighted && { color: 'white' }]}>
                    {`${rowData}`}
                </Text>
            </View>
        </TouchableHighlight>
    );
}
/**
 * 显示前
 */

_dropdown_willShow() {
    this.setState({
        isshow: true
    })
}
/**
 * 显示后
 */
_dropdown_willHide() {
    this.setState({
        isshow: false
    });
}

}
const styles = StyleSheet.create({
container: {
height: 40,
alignItems: 'center',
justifyContent: 'center',
width: width,
},
dropdown: {
position: 'absolute',
left: 8,
},
dropdown_text: {
fontSize: 14,
color: '#a5d2f2'
},
imgIcon: {
width: 15,
marginTop: 68,
height: 15,
position: 'absolute',
left: 55
},
dropdown_dropdown: {
width: 60,
height: 78,
},
dropdown_row: {
flexDirection: 'row',
height: 25,
width: 60,
alignItems: 'center',
},

dropdown_row_text: {
    marginHorizontal: 2,
    fontSize: 10,
    color: '#515a6e',
    textAlignVertical: 'center',
},

});