介绍

ReactNative UI框架
DefaultToolBar

安装

npm install --save react-native-allui

连接

将 node_modules/react-native-allui/android/app/src/main/assets 目录完整拷贝到您的 android/app/src/main 下面

组件

工具条(ToolBar)

支持阴影、沉浸式、自定义背景、自定义图标、图标标签等内容

DefaultToolBar

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

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

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

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

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

import {Badge} from "AllUI";
<Badge>
    <Text>12345</Text>
</Badge>

参数说明

name	desc	type	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

import {Animation} from "AllUI";
<Animation>
    ...Component
</Animation>

静态属性

name	desc	values
BUILT	内置动画

参数说明

name	desc	type	default
duration	动画持续时间	number	700
create	创建时动画	BUILT	Spring
update	更新时动画	BUILT	Spring

react-native-allui

介绍

安装

连接

组件

工具条(ToolBar)

DefaultToolBar

静态属性

参数说明:

图标(Icon)

Icon

图标列表

参数说明

按钮(Button)

Button

静态属性

参数说明

卡片(Card)

Card

参数说明

模态框(Mode)

Mode

参数说明

标签(Badge)

Badge

参数说明

动画(Animation)

Animation

静态属性

参数说明

结尾

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads