介绍
ReactNative UI框架
安装
npm install --save react-native-allui
连接
将 node_modules/react-native-allui/android/app/src/main/assets 目录完整拷贝到您的 android/app/src/main 下面
组件
工具条(ToolBar)
支持阴影、沉浸式、自定义背景、自定义图标、图标标签等内容
DefaultToolBar
;<DefaultToolBar title="Welcome" left=<Icon type="" size=28/> rightBadge=text: "1" right=<Icon type="" size=28/> onPress= { console }/>
静态属性
name | desc | values |
---|---|---|
BUTTON_CLICK_TYPE | 点击事件返回类型 | LEFT (左侧菜单按钮) |
BUTTON_CLICK_TYPE | RIGHT (右侧菜单按钮) |
参数说明:
name | desc | type | must | default |
---|---|---|---|---|
height | 工具条高度 | number/string | 70 | |
width | 工具条宽度 | number/string | 100% | |
shadow | 是否开启阴影 | boolean | false | |
backgroundColor | 工具条背景颜色 | string | #009688 | |
immerse | 是否开启沉浸式 | boolean | false | |
full | 是否全屏 | boolean | false | |
titleAlign | 标题位置 | string(flex-start、center、flex-end) | flex-start | |
title | 显示标题 | string | √ | |
titleStyle | 标题样式 | Object | {color: "#FFF", fontSize: 18, fontWeight: 'bold'} | |
left | 左侧内容 | string or <Text/> | ||
leftStyle | 左侧内容样式 | Object | {color: "#FFF", fontSize: 18} | |
leftBadge | 左侧标签 | Object | ||
right | 右侧标签 | string or <Text/> | ||
rightStyle | 右侧内容样式 | Object | {color: "#FFF", fontSize: 18} | |
rightBadge | 右侧标签 | Object | ||
onPress | 点击回调 | function(BUTTON_CLICK_TYPE) | ||
margin | 左右最小边距 | number | 20 |
图标(Icon)
基本图标、表情等
Icon
;<Icon type="" size=28/>
图标列表
参数说明
name | desc | type | must | default |
---|---|---|---|---|
size | 图标大小 | number | 20 | |
color | 图标颜色 | string | ||
type | 图标类型(应参见图标列表) | string | √ | |
weight | 字重 | number/string |
按钮(Button)
普通按钮,悬浮按钮等
Button
;<Button color="#009688" backgroundColor=null width=null onPress= {console;}>GO TO GITHUB</Button>
静态属性
name | desc | values |
---|---|---|
BUTTON_TOUCHABLE_TYPE | 按钮触摸回馈类型 | WithoutFeedback (无效果) |
BUTTON_TOUCHABLE_TYPE | Highlight (高亮) | |
BUTTON_TOUCHABLE_TYPE | NativeFeedback (波浪) | |
BUTTON_TOUCHABLE_TYPE | Opacity (透明度改变) |
参数说明
name | desc | type | must | default |
---|---|---|---|---|
width | 按钮宽度 | number/string | 120 | |
height | 按钮高度 | number/string | 50 | |
backgroundColor | 背景颜色 | string | #009688 | |
color | 字体颜色 | string | #FFF | |
fontSize | 字体大小 | number | 16 | |
radius | 圆角大小 | number | 1 | |
style | 自定义样式 | Object | ||
touchableType | 按钮反馈效果 | BUTTON_TOUCHABLE_TYPE | BUTTON_TOUCHABLE_TYPE.NativeFeedback | |
feedbackColor | 波浪效果反馈颜色(touchableType == BUTTON_TOUCHABLE_TYPE.NativeFeedback) | string | ||
onPress | 按钮点击回调 | Function | ||
enable | 按钮是否可用 | boolean | false | |
borderless | 无边界的动画(touchableType == BUTTON_TOUCHABLE_TYPE.NativeFeedback) | boolean | true |
卡片(Card)
内容卡片、定制卡片等
Card
;<Card shadow=false padding=0> <View style=height: 180> <Mode height=null bottom=0 inner= <View style=padding: 10> <Text style=color: "#FFF" fontSize: 25>Welcome</Text> <Text style=color: "#ddd">React Native Android UI</Text> </View> > <Image style=flex: 1 source= uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523896655165&di=a55604748d39bf8685894b0c5793f34e&imgtype=0&src=http%3A%2F%2Ff0.topitme.com%2F0%2F94%2F9a%2F11245229048229a940o.jpg" /> </Mode> </View> <View> <Text style=padding: 10 color: "#aaaaaa"> Scale the image
参数说明
name | desc | type | must | default |
---|---|---|---|---|
padding | 内边距 | number | 20 | |
margin | 外边距 | number | 5 | |
borderWidth | 边框宽度,没有阴影时生效 | number | 1 | |
borderColor | 边框颜色,没有阴影时生效 | string | #eee | |
borderRadius | 圆角 | number | 3 | |
backgroundColor | 背景颜色 | string | #FFF | |
shadow | 阴影 | boolean | true | |
width | 宽度 | number/string | ||
height | 高度 | number/string | ||
style | 自定义样式 | Object |
模态框(Mode)
遮罩层、模态框
Mode
;<Mode height=null bottom=0 inner= <View style=padding: 10> <Text style=color: "#FFF" fontSize: 25>Welcome</Text> <Text style=color: "#ddd">React Native Android UI</Text> </View>> <Image style=flex: 1 source= uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523896655165&di=a55604748d39bf8685894b0c5793f34e&imgtype=0&src=http%3A%2F%2Ff0.topitme.com%2F0%2F94%2F9a%2F11245229048229a940o.jpg" /></Mode>
参数说明
name | desc | type | must | default |
---|---|---|---|---|
width | 宽度 | number/string | 100% | |
height | 高度 | number/string | 100% | |
backgroundColor | 填充颜色 | string | #000 | |
opacity | 透明度 | number(0-1) | 0.3 | |
top | 顶部距离 | number | ||
left | 左边距离 | number | ||
right | 右边距离 | number | ||
bottom | 下面距离 | number | ||
visible | 是否可见 | boolean | true | |
inner | 模态框中的组件 | Component | ||
onPress | 模态框点击事件 | Function |
标签(Badge)
标签、小红点、消息数目
Badge
;<Badge> <Text>12345</Text></Badge>
参数说明
name | desc | type | must | default |
---|---|---|---|---|
backgroundColor | 背景颜色 | string | #de4d3b | |
color | 内容颜色 | string | #fff | |
top | 顶部距离 | number | ||
left | 左边距离 | number | ||
right | 右边距离 | number | ||
bottom | 下面距离 | number | ||
text | 标签文本 | string | ||
size | 标签大小 | number | 12 | |
poitDisplay | 当text为空时是否显示小红点 | boolean | false | |
weight | text字重 | number/string | bold | |
style | 自定义样式 | Object |
动画(Animation)
组件进入动画、组件更新动画
Animation
;<Animation> ...Component</Animation>
静态属性
name | desc | values |
---|---|---|
BUILT | 内置动画 |
参数说明
name | desc | type | must | default |
---|---|---|---|---|
duration | 动画持续时间 | number | 700 | |
create | 创建时动画 | BUILT | Spring | |
update | 更新时动画 | BUILT | Spring |