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//滑动单元格

使用方法

1. 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	否	回调函数

2. 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	否	回调函数，无参数

3. RoCell

//官网对于TextInpput,可以设置的属性在这边都可以使用，如placeholder，secureTextEntry等。不再做赘述
      <Ro.RoCell title="请输入密码" placeholder="请输入密码" maxLength={12} secureTextEntry={true}/>

属性名称	数据类型	是否必填	说明
title	String	否	按提示文本
onChangeText	Function	否	设置文本输入监听的回调函数

4. 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

5. 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	否	回调函数

6. 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

7. RoSwitch

属性名称	数据类型	是否必填	说明
inActiveBackColor	String	否	未激活状态背景颜色
inActiveColor	String	否	未激活状态按钮颜色
activeBackColor	String	否	激活状态的背景颜色
activeColor	String	否	激活状态按钮颜色
size	Numer	否	尺寸
onChange	Function	否	回调函数，修改时状态的改变

8. RoPicker 暂时还有部分问题，还在维护

9. 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	否	自定义内容

10. 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	否	自定义内容

11. 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组件一样

12. 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

13. 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

14. RoDropDownMenu

属性名称	数据类型	是否必填	说明
changeMenu	Array	是	步骤数据 [{title:"",choice:[{text: 'text',value: 'value',}]}]
activeColor	String	否	激活中文字颜色
activeIcon	String	否	激活中的icon
inActiveColor	String	否	未激活的文字颜色
inActiveIcon	String	否	未激活的icon
changeMenu	Function	否	修改顶部标题回调函数
change	Function	否	点击子选项，回调函数

15. 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	否	点距离顶部的距离

16. RoActivePage

属性名称	数据类型	是否必填	说明
source	String	是	背景图片
time	Number	否	页面展示的时间
isAnimated	Boolean	否	是否需要动画
callBack	Function	否	页面展示完毕或者用户点击结束按钮的回调函数
children	Object	否	自定义页面内容

17. RoSwiperCell

属性名称	数据类型	是否必填	说明
children	Object	是	单元格内部内容
rightColor	String	否	右边按钮的颜色
rightWord	String	否	右边按钮的文字
onPressRight	Function	否	右边点击返回
showLeft	Boolean	否	是否显示左边的滑块，默认false
leftWord	String	否	左边按钮的文字
leftColor	String	否	左边按钮的颜色
onPressLeft	Function	否	左边回调函数