react-native-ui-lib, 用于React native的用户界面组件库

分享于 

10分钟阅读

GitHub

  繁體 雙語
The Amazing UI-Lib
  • 源代码名称:react-native-ui-lib
  • 源代码网址:http://www.github.com/wix/react-native-ui-lib
  • react-native-ui-lib源代码文档
  • react-native-ui-lib源代码下载
  • Git URL:
    git://www.github.com/wix/react-native-ui-lib.git
    Git Clone代码到本地:
    git clone http://www.github.com/wix/react-native-ui-lib
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/wix/react-native-ui-lib
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    react-native-ui-lib

    Build StatusnpmNPM Downloads

    UI工具集&组件库用于React native

    文档

    请查看我们的文档站点。

    演示

    这个演示在这里找到了 要运行它:

    • 安装依赖项:npm install ( 仅第一次)

    • 启动打包程序:npm start

    • 运行:react-native run-ios 或者 react-native run-android ( 或者在Xcode或者 Android Studio 中)

    最新版本支持 RN44启动

    安装

    yarn add react-native-ui-lib

    或者

    npm i --save react-native-ui-lib

    本机依赖项

    某些组件使用这些本机依赖项,它们不是要求,但将允许你创建更好的lookings应用程序(:

    • react-native-animatable
    • react-native-blur

    用法

    这是一个快速的例子,如何使用我们的基本组件,修饰符和预设生成一个良好的屏幕。

    import React, {Component} from'react';import {View, TextInput, Text, Button} from'react-native-ui-lib';export defaultclassExampleextendsComponent {
     render() { return (
     <ViewflexpaddingH-25paddingT-120>
     <Textblue50text20>Welcome</Text>
     <TextInputtext50placeholder="username"dark10/>
     <TextInputtext50placeholder="password"secureTextEntrydark10/>
     <ViewmarginT-100center>
     <Buttontext70whitebackground-orange30label="Login"/>
     <Buttonlinktext70orange30label="Sign Up"marginT-20/>
     </View>
     </View>
     );
     }
    }
    样式

    每个UI组件的基础基础是它的样式。 我们使用基本样式预设来定义规则和我们所遵循的样式指南。

    presetes的颜色包括:,邮资 Typography,阴影,边框半径,。

    UILib已经提供了一组预定义的常量和预设。

    你可以轻松地使用代码中的任何位置,如使用它的他常量值或者作为组件修饰符。

    它也很容易定义你自己的预设。

    import {Typography, Colors} from'react-native-ui-lib';Colors.loadColors({pink:'#FF69B4',gold:'#FFD700',
    });Typography.loadTypographies({h1: {fontSize:58,fontWeight:'300',lineHeight:80},h2: {fontSize:46,fontWeight:'300',lineHeight:64},
    });

    例如下面的行

    <Texth1pink>Hello World</Text>

    将生成这里文本

    我们将使用 h1 h1 h1 typography typography和粉色颜色值设置文本元素样式。

    修饰符

    你可能已经注意到了,我们将样式预设转换为修饰符。 modifier 帮助你轻松快速地创建stun用户界面。

    快速对齐

    使用我们的校准道具来快速定位你的内容,而不用困惑计算所有这些flex规则。 左,磅,,,,,,,,,,,

    <Viewleft>
     <Buttonlabel="Button">
    </View>
    <Viewright>
     <Buttonlabel="Button">
    </View>
    <Viewtop>
     <Buttonlabel="Button">
    </View>
    <Viewbottom>
     <Buttonlabel="Button">
    </View>
    <Viewcenter>
     <Buttonlabel="Button">
    </View>

    间距&样式

    这里也是。空间,伸展,色彩更清晰。

    • [colorKey] ( 文本颜色), [colorKey] <Text pink>...</Text><View bg-pink>...</View>

    • [typographyPresetKey] ( 文本组件) <Text h1>...</Text>

    • flex flex flex-

    <Viewflex>//be default is flex=1
     <Viewflex-2/>
     <Viewflex-3/>
     <Viewflex-4/>
    </View>
    • padding- [value], [value], [value],, paddingR- [value],五分 paddingB- [value],五分 paddingV-<View paddingV-20 paddingH-30>...</View>

    • margin- [value], [value], [value],, marginR- [value],五分 marginB- [value],五分 marginV-<View marginT-5 marginB-10>...</View>

    • pad和边距修改器也可以使用空间常数。<View margin-s5 padding-s2>...</View>

    看看这个例子,这里我们使用了大部分这些道具

    资产

    无论是 icon。占位符还是插图,资产都是整个UI系统的重要部分,我们随处都在使用它们。
    加载 assets 组,并使用图像组件轻松地呈现它们。

    import {Assets, Image} from'react-native-ui-lib';Assets.loadAssetsGroup('icons', {icon1:require('icon1.png'),icon2:require('icon2.png'),icon3:require('icon3.png'),
    });// or as a nested group to create your own hierarchyAssets.loadAssetsGroup('illustrations.placeholders', {emptyCart:require('emptyCart.png'),emptyProduct:require('emptyProduct.png'),
    });Assets.loadAssetsGroup('illustrations.emptyStates.', {noMessages:require('noMessages.png'),noContacts:require('noContacts.png'),
    });// Use them with the Image component (our Image component)<ImageassetName="icon1"/>// default assetGroup is"icons"<ImageassetName="emptyCart"assetGroup="illustrations.placeholders"/>// The old fashion way will work as well<Imagesource={Assets.icons.icon1}/>

    无铅组件( WIP )

    • 动作栏
    • 操作表( 跨平台)
    • 头像
    • 徽章
    • 基本列表
    • 按钮
    • 连接状态栏
    • 列表项
    • 状态屏幕
    • 加载程序屏幕
    • 页面控制
    • 选取器
    • 步进器
    • 文本
    • TextInput
    • MaskedInput
    • TagsInput
    import {Card} from'react-native-ui-lib';
    <Cardrow// control the children flow directionborderRadius={12}height={150}containerStyle={{marginRight:20}}onPress={...}enableShadow={true/false}>
     <Card.Imagewidth={80}imageSource={cardImage}/>
     <View>
    . . .
     </View>
    </Card>
    掩码输入
    import {MaskedInput} from'react-native-ui-lib';
    <MaskedInputrenderMaskedText={this.renderTimeText}caretHiddenkeyboardType={'numeric'}maxLength={4}/>renderTimeText(value) {
     constpaddedValue = _.padStart(value, 4, '0');
     consthours = paddedValue.substr(0, 2);
     constminutes = paddedValue.substr(2, 2); return (
     <Texttext20dark20center>
     {hours} <Textred10>h</Text>
     {minutes} <Textred10>m</Text>
     </Text>
     );
    }

    Masked Input

    标记输入
    import {TagsInput} from'react-native-ui-lib';
    <TagsInputcontainerStyle={{marginBottom:20}}placeholder="Enter Tags"tags={this.state.tags}// array of strings/objectsonChangeTags={(tags) => this.setState({tags})}getLabel={(tag) => tag.label}inputStyle={{fontSize:22,color:'blue'}}renderTag={(tag, index, shouldMarkTagToRemove) => <View>...</View>}hideUnderline={true/false}/>

    Tags Input

    由于Android不支持 TextInput callback回调,所以在退格键上删除标记的功能将无法工作。 要修复这里问题,请按照以下说明操作:

    android/app/build.gradle 中更新你的依赖项:

    dependencies {
     // Add this dependency: compile project(":react-native-ui-lib")
    }

    更新你的android/settings.gradle:

    include ':react-native-ui-lib'project(':react-native-ui-lib').projectDir =newFile(rootProject.projectDir, '../node_modules/react-native-ui-lib/lib/android')

    MainApplication.java 中,添加到 getPackages() 列表中:

    importcom.wix.reactnativeuilib.textinput.TextInputDelKeyHandlerPackage;@OverrideprotectedList<ReactPackage> getPackages() {
     returnArrays.<ReactPackage>asList(
     // Add this package:newTextInputDelKeyHandlerPackage()
     );
    }

    帮助器

    AvatarHelpers

    getInitials

    使用方法:

    import {AvatarHelper} from'react-native-ui-lib';AvatarHelper.getInitials('Lilly Wheeler');// LWAvatarHelper.getInitials('Russell Lloyd');// RLAvatarHelper.getInitials('Andrew');// A

    颜色

    使用方法:

    import {Colors} from'react-native-ui-lib';Colors.rgba('#ff2442', 0.05);// 'rgb(255, 36, 66, 0.05)'Colors.rgba(44, 224, 112, 0.2);// 'rgb(44, 224, 112, 0.2)'

    COM  react  component  NAT  Native  组件  
    相关文章