1.2.1 • Published 1 month ago
react-native-ro v1.2.1
react-native-ro
开始
拉取依赖
$ npm install react-native-ro --save
项目目的
由于React Native 官网组件样式不是非常美观。并且Android和ios部分样式有所出入 所以这边提供了双端统一样式组件。
注意
您需要安装react-native-vextor-icons
,才能使用部分(有关icon的)功能。
使用方法
// 1. 一次引入所有组件
import Ro from 'react-native-ro';
<Ro.RoButton></Ro.RoButton>
// 2. 按需引入组件
import{RoButton} from 'react-native-ro'
<RoButton></RoButton>
已有组件
1. RoButton //按钮组件
2. RoAvator //头像组件
3. RoCell //输入框组件
4. RoToast //提示消息组件
5. RoNotify //消息通知组件
6. RoCheckBox //多选框组件
7. RoSelect //单选框组件
8. RoSwitch //开关组件
9. RoPicker //选择器组件
10. RoDialog //选择器组件
11. RoPopover //确认框组件
12. RoPreview//单图预览组件
13. RoPreviewList //多图预览组件
14. RoSteps //步骤器组件
15. RoDropDownMenu //下拉菜单组件
15. RoSwiper //轮播图组件
16. RoSwiperItem //自定义轮播内容
17. RoGrid//宫格组件
18. RoGridItem//宫格子项组件
19. RoActivePage//首进页面的大致编写
20. RoSwiperCell//滑动单元格
使用方法
- RoAvator 这边为初学者稍微写一下使用方法
//自带图片(头像)预览,暂不支持关闭预览。
<RoAvator source={require("@assets/image/pic1.png")}></RoAvator>
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
uri | String | 否 | 头像图片路径 |
name | String | 否 | 文字头像,如果拥有同时有name和uri,优先显示name |
size | Number | 否 | 图像尺寸 |
isCircle | Boolean | 否 | 默认圆形,true为圆形 |
type | Strinig | 否 | 文字头像时背景颜色,default,success,warning,wrong |
style | Object | 否 | 自定义头像样式,会默认覆盖原本的样式 |
onPress | Function | 否 | 回调函数 |
- RoButton
<RoButton title="按钮组件" type="waring" disabled={true}></RoButton>
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
type | String | 否 | 按钮类型,分别为default,success,warning,wrong,disable(此时只有样式,但是可以点击) |
title | String | 否 | 按钮提示文本 |
color | String | 否 | 自定义按钮颜色 |
width | Number | 否 | 默认百分百 |
isCircle | Boolean | 否 | 设置按钮边框是否是圆角 |
style | Object | 否 | 自定义按钮样式 |
textStyle | Object | 否 | 自定义按钮上面的文本样式 |
onPress | Function | 否 | 回调函数,无参数 |
- RoCell
//官网对于TextInpput,可以设置的属性在这边都可以使用,如placeholder,secureTextEntry等。不再做赘述
<Ro.RoCell title="请输入密码" placeholder="请输入密码" maxLength={12} secureTextEntry={true}/>
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
title | String | 否 | 按提示文本 |
onChangeText | Function | 否 | 设置文本输入监听的回调函数 |
- RoCheckBox
<Ro.RoCheckBox activeColor="#357da1" data={[{ value: 1, name: 1 }, { value: 2, name: 2 }]} />
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
data | Array | 是 | 复选框的选项,数据格式为:{name:name,value:value,options:{wordStyle:{}}} |
activeIcon | String | 否 | 激活状态icon名称 |
inActiveIcon | String | 否 | 未激活状态icon名称 |
activeColor | String | 否 | 激活状态icon颜色 |
inActiveColor | String | 否 | 未激活状态icon颜色 |
onChange | Function | 否 | 回调函数,返回选中的value |
- RoNotify
// color优先级大于type,只要设置了color,type将会失效
<Ro.RoNotify visiable={true} title="这是消息通知" type={"success"} color="#357da1"></Ro.RoNotify>
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
visiable | Boolean | 否 | 是否展示 |
title | String | 否 | 标题 |
color | String | 否 | 自定义背景颜色 |
type | String | 否 | 展示类型【success,default,wrong,warming】 |
changeState | Function | 否 | 回调函数 |
- RoSelect
<Ro.RoSelect data={[{ name: "选项一", value: 1, }, { name: "选项二", value: 2, }]} />
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
data | Array | 是 | 复选框的选项,数据格式如例 |
activeIcon | String | 否 | 激活状态icon名称 |
inActiveIcon | String | 否 | 未激活状态icon名称 |
activeColor | String | 否 | 激活状态icon颜色 |
inActiveColor | String | 否 | 未激活状态icon颜色 |
onChange | Function | 否 | 回调函数,返回选中的value |
- RoSwitch
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
inActiveBackColor | String | 否 | 未激活状态背景颜色 |
inActiveColor | String | 否 | 未激活状态按钮颜色 |
activeBackColor | String | 否 | 激活状态的背景颜色 |
activeColor | String | 否 | 激活状态按钮颜色 |
size | Numer | 否 | 尺寸 |
onChange | Function | 否 | 回调函数,修改时状态的改变 |
- RoPicker 暂时还有部分问题,还在维护
- RoDialog
//这里主要做:children 展示,以便理解何为children参数
<Ro.RoDialog isMask={true} visiable={true}>
{/* 在Dialog内部写自己的标签,就会当作Children数据自动传进去 */}
<Text>this is place where your define your own children </Text>
</Ro.RoDialog>
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
title | String | 否 | 标题 |
message | String | 是 | 正文内容/主要内容 |
confirmText | String | 否 | 确定按钮文字 |
confirmColor | String | 否 | 确定按钮颜色 |
cancelText | String | 否 | 取消按钮颜色 |
hasCancel | Boolean | 否 | 是否展示取消按钮,默认true |
isMask | Boolean | 否 | 是否展示黑色背景,默认true |
visiable | Boolean | 否 | 是否展示弹确认框,默认false |
confirm | Function | 否 | 确定按钮回调函数 |
cancel | Function | 否 | 取消按钮回调函数 |
children | Object | 否 | 自定义内容 |
- RoPopover
<Ro.RoPopover list={["Nide", "111"]} arror="start">
<Text>TEST</Text>
</Ro.RoPopover>
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
list | String | 是 | 子选项数据 |
model | String | 否 | 显示模式 dark/light |
arror | String | 否 | 按钮位置 start/center/end |
placement | String | 否 | 弹出框位置 分别为top/right/bottom/left |
choice | Function | 否 | 选中数据的回调,返回数据和index |
children | Object | 否 | 自定义内容 |
- RoPreview
<Ro.RoPreview source={{ uri: 'https://bpic.51yuansu.com/backgd/cover/00/59/29/62c56b8a93f7a_800.jpg?x-oss-process=image/resize,w_780/sharpen,100' }}/>
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
source | String | 是 | 和官网的Source 属性一样,本地require(url),网络uri:url| |
height | Numer | 否 | 图像尺寸 |
width | Numer | 否 | 图像尺寸 |
resizeMode | String | 否 | 和官网Image组件一样 |
- RoPreviewList
<Ro.RoPreviewList
list={[
{ uri: 'https://bpic.51yuansu.com/backgd/cover/00/59/29/62c56b8a93f7a_800.jpg?x-oss-process=image/resize,w_780/sharpen,100' },
{ uri: 'https://bpic.51yuansu.com/pic3/cover/04/08/47/629ef03a6d18b_800.jpg?x-oss-process=image/resize,w_260/sharpen,100' },
{ uri: 'https://bpic.51yuansu.com/pic3/cover/04/08/64/62b906544f3f4_800.jpg?x-oss-process=image/resize,w_260/sharpen,100' }]}
>
<View>
<Image style={{ height: 200, width: 200 }} source={{ uri: 'https://bpic.51yuansu.com/backgd/cover/00/59/29/62c56b8a93f7a_800.jpg?x-oss-process=image/resize,w_780/sharpen,100' }} />
</View>
</Ro.RoPreviewList>
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
children | Object | 是 | 包裹在标签内的其他组件 |
list | Array | 否 | 预览图片的路径,本地require,网路uri |
- RoSteps
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
direction | String | 否 | 排列方向 vertical/horizontal |
steps | Array | 是 | 步骤数据 {title:"",date:""} |
active | Number | 否 | 激活第几步,从0开始 |
activeColor | String | 否 | 激活中文字颜色 |
activeIcon | String | 否 | 激活中的icon |
inActiveColor | String | 否 | 未激活的文字颜色 |
inActiveIcon | String | 否 | 未激活的icon |
activedColor | String | 否 | 激活后的颜色 |
activedIcon | String | 否 | 激活后的icon |
- RoDropDownMenu
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
changeMenu | Array | 是 | 步骤数据 [{title:"",choice:{text: 'text',value: 'value',}}] |
activeColor | String | 否 | 激活中文字颜色 |
activeIcon | String | 否 | 激活中的icon |
inActiveColor | String | 否 | 未激活的文字颜色 |
inActiveIcon | String | 否 | 未激活的icon |
changeMenu | Function | 否 | 修改顶部标题回调函数 |
change | Function | 否 | 点击子选项,回调函数 |
- RoSwiper
// 是用方法一:直接接入images数据即可
<Ro.RoSwiper images={[ { uri: 'imgUrl' },{ uri: 'imgUrl' }]}/>
// 使用方法二:自定义子项,一定要使用RoSwiperItem
<Ro.RoSwiper>
<Ro.RoSwiperItem>
<View style={{ flex: 1,backgroundColor: "pink" }}></View>
</Ro.RoSwiperItem>
<Ro.RoSwiperItem>
<View style={{ flex: 1,backgroundColor: "skyblue"}}></View>
</Ro.RoSwiperItem>
</Ro.RoSwiper>
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
images | Array | 是 | 图片列表 |
nodeToTop | Number | 否 | 点距离顶部的距离 |
- RoActivePage
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
source | String | 是 | 背景图片 |
time | Number | 否 | 页面展示的时间 |
isAnimated | Boolean | 否 | 是否需要动画 |
callBack | Function | 否 | 页面展示完毕或者用户点击结束按钮的回调函数 |
children | Object | 否 | 自定义页面内容 |
- RoSwiperCell
属性名称 | 数据类型 | 是否必填 | 说明 |
---|---|---|---|
children | Object | 是 | 单元格内部内容 |
rightColor | String | 否 | 右边按钮的颜色 |
rightWord | String | 否 | 右边按钮的文字 |
onPressRight | Function | 否 | 右边点击返回 |
showLeft | Boolean | 否 | 是否显示左边的滑块,默认false |
leftWord | String | 否 | 左边按钮的文字 |
leftColor | String | 否 | 左边按钮的颜色 |
onPressLeft | Function | 否 | 左边回调函数 |
1.2.1
1 month ago
1.2.0
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.10.0
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago