react-native-allui v1.0.4

介绍

ReactNative UI框架

安装

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)
                }}
/>

静态属性

参数说明:

图标(Icon)

基本图标、表情等

Icon

import {Icon} from "AllUI";
<Icon type="&#xeb0a;" size={28}/>

图标列表

参数说明

按钮(Button)

普通按钮，悬浮按钮等

Button

import {Button} from "AllUI";
<Button color="#009688" backgroundColor={null} width={null} onPress={() => {console.log("1");}}>GO TO GITHUB</Button>

静态属性

参数说明

卡片(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>

参数说明

模态框(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>

参数说明

标签(Badge)

标签、小红点、消息数目

Badge

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

参数说明

动画(Animation)

组件进入动画、组件更新动画

Animation

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

静态属性

参数说明

结尾