Skip to content

这是一个可以自适应展开位置的下拉选择框。This is a drop-down selection box which can adapt to the deployment position automatically.

Notifications You must be signed in to change notification settings

pandas16/react-native-selfadapt-modal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

声明

因为工作原因,该插件已经停止维护了,如果还有小伙伴需要使用可copy LocationModal.js、NativeModal.js 后自行修改。

react-native-selfadapt-modal

Getting started

$ npm install react-native-selfadapt-modal --save

Usage

Demo

ZedILq.gif

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

API

关于弹框

属性名称 类型 是否必须 说明 默认值 备注
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.1.0

1.调整PropTypes类型,消除警告
2.修复列表元素靠右对齐时的显示异常
3.调整列表数据为空时,组件的处理方式

1.1.3

1.添加Modal展开状态的获取,通过openStatus回调函数实现 2.添加固定的列表头部(listHeader),使用场景:例如列表搜索框

下一步的计划

适配列表分页

About

这是一个可以自适应展开位置的下拉选择框。This is a drop-down selection box which can adapt to the deployment position automatically.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published