当前位置：首页 > 软件库 > 手机/移动开发 > >

react-native-ui-lib

UI Components Library for React Native

授权协议 MIT License

开发语言 Java

所属分类手机/移动开发

软件类型开源软件

地区不详

投递者邓德厚

操作系统跨平台

开源组织无

适用人群未知

软件概览

UI Toolset & Components Library for React Native

Check out our Docs.
Our Discord Channel

Download our Expo demo app

(You will need the Expo App)

Installing

See setup instructions here.

New Major Version 6.0

See breaking changes

For React Native >= 0.60.0

please use react-native-ui-lib

For React Native < 0.60.0

please use react-native-ui-lib@^3.0.0

Create your own Design System in 3 easy steps

Step 1

Load your foundations and presets (colors, typography, spacings, etc...)

// FoundationConfig.js

import {Colors, Typography, Spacings} from 'react-native-ui-lib';

Colors.loadColors({
  primaryColor: '#2364AA',
  secondaryColor: '#81C3D7',
  textColor: '##221D23',
  errorColor: '#E63B2E',
  successColor: '#ADC76F',
  warnColor: '##FF963C'
});

Typography.loadTypographies({
  heading: {fontSize: 36, fontWeight: '600'},
  subheading: {fontSize: 28, fontWeight: '500'},
  body: {fontSize: 18, fontWeight: '400'},
});

Spacings.loadSpacings({
  page: 20,
  card: 12,
  gridGutter: 16
});

Step 2

Set default configurations to your components

// ComponentsConfig.js

import {ThemeManager} from 'react-native-ui-lib';

// with plain object
ThemeManager.setComponentTheme('Card', {
  borderRadius: 8
});

// with a dynamic function
ThemeManager.setComponentTheme('Button', (props, context) => {
  // 'square' is not an original Button prop, but a custom prop that can
  // be used to create different variations of buttons in your app
  if (props.square) {
    return {
      borderRadius: 0
    };
  }
});

Step 3

Use it all together.Your configurations will be applied on uilib components so you can use them easily with modifiers.

// MyScreen.js

import React, {Component} from 'react';
import {View, Text, Card, Button} from 'react-native-ui-lib';

class MyScreen extends Component {
  render() {
    return (
      <View flex padding-page>
        <Text heading marginB-s4>My Screen</Text>
        <Card height={100} center padding-card marginB-s4>
          <Text body>This is an example card </Text>
        </Card>
        
        <Button label="Button" body bg-primaryColor square></Button>
      </View>
    );
  }
}

使用案例

React-Native包简单介绍

// 绘图 //"@react-native-community/art": "^1.1.2", 一个用于React Native的异步，未加密，持久的键值存储系统 //"@react-native-community/async-storage": "^1.7.1", // 针对Android，iOS，macOS和Windows的React Native Network Info API "@r
react-native——tab配置及跳转

在 App 中 tab 是常见的页面类型，在 RN 里使用 react-navigation 可快速地进行 tab 配置。假设应用有4个页面，两个是tab页面，两个是详情页面。 App.js //应用实际场景是有redux的，这里就不删除了。不使用rudex的话，直接 return <Router />就 ok 啦！ import React, { Component } from 'react
react-native 常见报错处理

1.java.io.IOException: Could not delete path 'F:\xxxx\android\app\build\intermediates\transforms\dex\debug\folders\1000'.解决：（权限问题导致）以管理员身份运行控制台再运行react-native run-android,如果还报错手动删除'F:\xxxx\android\app
react-native Element type is invalid: expected a string (for built-in components) or a class/functio

1、报错提示： Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `AppMain`.instantiateReactCompon
React-native中实现折叠效果实现

要实现这个折叠效果，，首先你需要一个 react-native-collapsible 组件其实效果很简单，，粘贴即可用，内容自己定义 'use strict'; import React, {Component} from 'react' import { View, Text, Image, ScrollView, StyleSheet, } from

react-native-ui-lib

Installing

New Major Version 6.0

For React Native >= 0.60.0

For React Native < 0.60.0

Create your own Design System in 3 easy steps

Step 1

Step 2

Step 3

同类工具

相关阅读

相关文章

相关问答

相关文档