my_rm_ui

Installation

$ npm install my_rn_ui --save

SegmentedControl 分段器

<SegmentedControl values={['Segment1', 'Segment2']} onChange={onChange}/>

| 属性 | 说明 | 类型 | 默认值 | | --------------------- | :-------------------------------------------------------------------------: | :-------: | :---------------: | | values | 选项数组,值是字符串 | Array | [] | | defaultIndex | 选中项在数组中的索引 | Number | 0 | | onChange | 回调函数, 其中 e.nativeEvent.item 是选中的值, e.nativeEvent.index 是选中项索引 | (e): void | function(){} | | disabledIndex | 禁用某个选项 | Number | null | | opacity | 透明度 | number | 0.2 | | selectBackgroundColor | 选中的背景颜色 | String | rgb(16, 142, 233) | | selectTextColor | 选中的文字颜色 | String | white |

LazyLoad 图片懒加载

const [distance, setDistance] = useState(0);

const _onLayout = (e) => {
 let {y} = e.nativeEvent.layout;
 setDistance(y);
};

<ScrollView onScroll={_onScroll}>
 <LazyLoad
   source={{
     uri:'',
   }}
   distance={distance}
 />
</ScrollView>

| 属性 | 说明 | 类型 | 默认值 | | ----------- | :------------------------: | :----: | :----: | | imageStyle | 图片样式 | Object | {} | | source | 图片 Url | String | | | distance | 外层 scrollView 滚动的距离 | Number | | | loadingText | 懒加载的文字 | String | 加载中 |

Listitem 列表

<Listitem itemText="这是备注" description="系统设置" rightIcon={true} />
<Listitem
 thumbUrl="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586108207971&di=ecdba3af687f6fa4530c40a7e1be5219&imgtype=0&src=http%3A%2F%2Fd.lanrentuku.com%2Fdown%2Fpng%2F1406%2F40xiaodongwu%2Ffrog.png"
 itemText="这是备注"
 descriptionStyle={styles.descriptionStyle}
 description="系统设置"
 rightIcon={true}
/>
<Listitem
 itemText="这是备注"
 description="系统设置"
 extra={<Text>111</Text>}
/>

| 属性 | 说明 | 类型 | 默认值 | | ---------------- | :----------------: | :-------: | :----------: | | thumbUrl | listItem 左边的图标 | String | '' | | itemText | listItem 左边的文字 | String | '' | | description | 备注提示文字 | String | '' | | descriptionStyle | 备注提示 style | Object | {} | | rightIcon | 右边图标 | Boolean | false | | rightText | 右边文字 | String | '' | | onPress | listItem 点击事件 | (e): void | function(){} | | extra | 扩展的 element 节点 | ReactNode | |

NoticeBar 通告栏

<NoticeBar content="警告 出现错误" onPress={onClick} />
<NoticeBar content="警告 出现错误" mode="close" />
<NoticeBar content="警告 出现错误" mode="link" />
<NoticeBar
 content="警告 出现错误"
 action={<Text style={{color: 'gray'}}>不在提示</Text>}
/>

| 属性 | 说明 | 类型 | 默认值 | | -------------- | :----------------------------: | :----------: | :-------------------: | | mode | 提示类型，可选 close,link | String | '' | | noticeLeftIcon | 在开始位置设置图标 | ReactNode | <Image source={} /> | | onPress | 点击关闭或者操作区域的回调函数 | (): void | | | action | 用于替换操作 icon 的文案 | ReactElement | | | content | 提示内容 | String | '' |

Picker 选择器

<Picker
 list={distance}
 wrapperHeight={150}
 itemHeight={50}
 onChange={onClick}
/>

| 属性 | 说明 | 类型 | 默认值 | | ---------------------- | :-----------------------------------------: | :------- | :----: | | list | 渲染的值 | Array | | | wrapperHeight | 包裹容器的高度 | number | 150 | | itemHeight | item 的高度 | number | 50 | | wrapperBackgroundColor | 包裹容器的背景颜色 | String | white | | hairlineWidth | 线的宽度 | number | 1 | | selectIndex | 默认选择的下标 | number | 0 | | onChange | 滚动的回调函数value当前值 index当前下标 | (): void | |

Slide 轮播

<Slide
 list={lisr}
 onIndexChanged={onChange}
 currentPage={2}
/>

| 属性 | 说明 | 类型 | 默认值 | | ----------------- | :-----------------: | :----------: | :------------: | | list | 渲染的值 | Array | | | currentPage | 默认的显示的下标 | number | 0 | | showsButtons | 是否展示 button | boolean | true | | renderButtons | 自定义 button | ReactElement | | | disableNextButton | 是否禁用下个 button | boolean | false | | disablePrevButton | 是否禁用上个 button | boolean | false | | buttonText | button 的内容文字 | ReactElement | | | width | 轮播的宽度 | number | 手机屏幕的宽度 | | height | 轮播的高度 | number | 200 | | onIndexChanged | 轮播滚动的回调函数 | (e): void | |

Toast 提示

const onToastShow = () => {
 Toast.showInfo('没有状态', {duration: 5000, position: 100});
 Toast.showSuccess('成功状态', {duration: 5000, position: 150});
 Toast.showError('错误状态', {duration: 5000, position: 150});
 Toast.showFail('Fail状态', {duration: 5000, position: 150});
};

<TouchableOpacity style={styles.btn} onPress={onToastShow}>
 <Text>按钮</Text>
</TouchableOpacity>

| 属性 | 说明 | 类型 | 默认值 | | --------------- | :----------------------: | :----: | :----: | | content | 自动关闭的延时，单位毫秒 | number | | | duration | 默认的显示的下标 | number | 0 | | position | 定位 | number | | | backgroundColor | toast 背景颜色 | string | #000 | | textColor | 字体颜色 | string | white |

Modal 弹窗

<Modal
 isVisible={distance}
 closeIconIsVisible={true}
 closeModal={onChange}
 onRequestClose={onRequestClose}
 modalTitle="你好你好"
 modalContent="我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容"
 onDismiss={dissmiss}
/>

| 属性 | 说明 | 类型 | 默认值 | | ------------------ | :----------------------: | :---------------------: | :----: | | isVisible | 控制 modal 是否显示 | boolean | false | | onRequestClose | 安卓返回键的回调函数 | (e): void | | | onShow | modal 打开前的回调函数 | (e): void | | | transparent | 是否透明 | boolean | false | | animationType | modal 出现的方式 | 'none'，'fade'，'slide' | fade | | onDismiss | modal 关闭回调 | (e): void | | | children | modal 内容自定义 | ReactElement | | | hasChildren | 是否有自定义子元素 | boolean | true | | modalContentStyle | modal 弹窗样式 | boolean | true | | closeIconIsVisible | 右上角关闭 icon 是否显示 | (e): void | | | closeModal | modal 关闭回调 | (e): void | | | modalTitle | 弹窗标题 | string | | | modalContent | 弹窗内容 | string | | | showButton | 是否显示 button | boolean | false | | closeButton | 右上角按钮回调函数 | (e): void | | | confirmButton | 确定按钮回调函数 | (e): void | |

Popover 气泡

<Popover
 isVisible={distance}
 popoverContent={<Text style={{color: 'white'}}>我是popover内容</Text>}
 buttonContent={<Text>我是button</Text>}
/>

| 属性 | 说明 | 类型 | 默认值 | | -------------- | :-----------: | :----------: | :----: | | isVisible | 是否显示 | boolean | false | | popoverContent | toast 背景颜色 | ReactElement | #000 | | buttonContent | 字体颜色 | ReactElement | white |