# 介绍
ReactNative UI框架  
<img src="https://github.com/Adversarys/react-native-allui/blob/master/images/default_tool_bar.png?raw=true" alt="DefaultToolBar" title="DefaultToolBar" height="400" />  

# 安装
```
npm install --save react-native-allui
```  
# 连接
将 **node_modules/react-native-allui/android/app/src/main/assets** 目录完整拷贝到您的 **android/app/src/main** 下面
# 组件
# 工具条(ToolBar)
支持阴影、沉浸式、自定义背景、自定义图标、图标标签等内容
## DefaultToolBar
```js
import {DefaultToolBar, Icon} from "AllUI";
<DefaultToolBar
                title="Welcome"
                left={<Icon type="&#xeb0a;" size={28}/>}
                rightBadge={{text: "1"}}
                right={<Icon type="&#xea93;" size={28}/>}
                onPress={(type) => {
                    console.log(type)
                }}
/>
```
#### 静态属性
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
```js
import {Icon} from "AllUI";
<Icon type="&#xeb0a;" size={28}/>
```
#### 图标列表
#### 参数说明
name            | desc                      | type                                      | must      | default
----            | ---                       | ---                                       | ---       | ---
size            | 图标大小                   | number                                    |          | 20
color           | 图标颜色                   | string
type            | 图标类型(应参见图标列表)    | string                                    | √
weight          |字重                        | number/string    
# 按钮(Button)
普通按钮，悬浮按钮等
## Button
```js
import {Button} from "AllUI";
<Button color="#009688" backgroundColor={null} width={null} onPress={() => {console.log("1");}}>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                                                                  | Object
# 卡片(Card)
内容卡片、定制卡片等
## Card
```js
import {Card,Mode,Button} from "AllUI";
<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 uniformly (maintain the image's aspect ratio) so that both dimensions
            (width
            and height) of the image will be equal to or larger than the corresponding dimension of
            the
            view (minus padding).
        </Text>
        <View style={{alignItems: "flex-end", marginRight: 10}}>
            <Button color="#009688" backgroundColor={null} width={null} onPress={() => {
                console.log("1");
                this.setState({visible: !this.state.visible});
            }}>GO TO GITHUB</Button>
        </View>
    </View>
</Card>
```
#### 参数说明
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
```js
import {Mode} from "AllUI";
<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
```js
import {Badge} from "AllUI";
<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
```js
import {Animation} from "AllUI";
<Animation>
    ...Component
</Animation>
```
#### 静态属性
name                    | desc              | values
----                    | ----              | ----
BUILT                   | 内置动画           |
#### 参数说明
name            | desc                      | type          | must      | default
----            | ---                       | ---           | ---       | ---
duration        | 动画持续时间               | number        |           | 700
create          | 创建时动画                 | BUILT        |           | Spring
update          | 更新时动画                 | BUILT        |           | Spring
# 结尾