my_rn_ui v1.0.3

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>

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}
/>

Slide 轮播

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

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>

Modal 弹窗

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

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 |