react-native-selfadapt-modal

This is a bullet window that can adapt itself to the unfolding position.


Keywords
react-native-component, react-component, react-native, modal, selfadapt, react, self-adaption
License
MIT
Install
npm install react-native-selfadapt-modal@1.1.3

Documentation

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),使用场景:例如列表搜索框

下一步的计划

适配列表分页