这是一个可以自适应展开位置的下拉选择框。T
因为工作原因，该插件已经停止维护了，如果还有小伙伴需要使用可copy LocationModal.js、NativeModal.js 后自行修改。
react-native-selfadapt-modal Getting started$ npm install react-native-selfadapt-modal --save
Demo
import SelfadaptModal from 'react-native-selfadapt-modal'; const TestData = [ {id:10086,name:'Option 1(This is a long, long, long option.)'}, {id:10087,name:'Option 2'}, {id:10088,name:'Option 3'}, {id:10089,name:'Option 4'}, ]; render = () => { return ( <SelfadaptModal menuList={TestData} containerStyle={styles.demeOneBtn} content={this.state.demoOneValue} onPress={(res)=>this.doSelect(res,'demoOneValue')}> <Text style={{fontSize:Size(14),color:'#fff'}}>{`click here`}</Text> </SelfadaptModal> ); } const styles = StyleSheet.create({ demeOneBtn: { padding: 10, borderRadius: 5, backgroundColor: '#58A0FF', }, });
更多示例见 DEMO
| 属性名称 | 类型 | 是否必须 | 说明 | 默认值 | 备注 |
|---|---|---|---|---|---|
| menuList | array | 是 | 下拉框选项列表数据源 | [] | 无 |
| label | string | 否 | 用于显示的选项的label | name | 用于menuList的元素 是对象的情况 |
| content | string | 否 | 默认选项 | 无 | 无 |
| paddingWidth | number | 否 | 按钮的padding高度 | 0 | 当使用LocationModal 的按钮还有外层包裹 时可能需要使用 |
| privateMenuItem | func | 否 | 自定义选项组件 | 无 | 包含三个参数 item,index,isSelect |
| modalStyle | object | 否 | modal样式 | 无 | 无 |
| flatListStyle | object | 否 | FlatList样式 | 无 | 无 |
| activeMenuStyle | object | 否 | 选中单项选项容器样式 | 无 | 无 |
| unActiveMenuStyle | object | 否 | 未选中单项选项容器样式 | 无 | 无 |
| activeMenuTextStyle | object | 否 | 选中单项选项文本样式 | 无 | 无 |
| unActiveMenuTextStyle | object | 否 | 未选中单项选项文本样式 | 无 | 无 |
| openStatus | func | 否 | 获取Modal展开状态的回调函数 | 无 | 无 |
| listHeader | func | 否 | 固定的列表头部,非固定头部可传入ListHeaderComponent实现 | 无 | 无 |
| 属性名称 | 类型 | 是否必须 | 说明 | 默认值 | 备注 |
|---|---|---|---|---|---|
| children | element | 是 | 子元素 | 无 | 无 |
| onPress | func | 否 | 下拉选项点击事件 | 无 | 无 |
| containerStyle | object | 否 | 按钮样式 | 无 | 无 |
1.调整PropTypes类型，消除警告
2.修复列表元素靠右对齐时的显示异常
3.调整列表数据为空时，组件的处理方式
1.添加Modal展开状态的获取,通过openStatus回调函数实现 2.添加固定的列表头部(listHeader),使用场景:例如列表搜索框
下一步的计划适配列表分页
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
