react native ui lib

ชุดเครื่องมือ UI และส่วนประกอบสำหรับ React Native

---

ลิงค์

• เอกสาร
• ห้องสมุด Figma
• ช่อง Discord

ดาวน์โหลดแอพสาธิตงานแสดงสินค้าของเรา

(คุณจะต้องใช้แอพ Expo) หรือเปิดลิงก์ในอุปกรณ์ของคุณ [expo] exp: //exp.host/@vn.chemgio/rnuilib? release-channel = ค่าเริ่มต้น

การติดตั้ง

ดูคำแนะนำการตั้งค่าที่นี่

ใหม่ Major Major 6.0

ดูการเปลี่ยนแปลงที่แตกหัก

สำหรับ React Native> = 0.60.0

โปรดใช้ react-native-ui-lib

สำหรับ React Native <0.60.0

กรุณาใช้ react-native-ui-lib@^3.0.0

สร้างระบบการออกแบบของคุณเองใน 3 ขั้นตอนง่ายๆ

ขั้นตอนที่ 1

โหลดฐานรากและที่ตั้งไว้ล่วงหน้าของคุณ (สี, ตัวอักษร, ระยะห่าง, ฯลฯ ... )

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

ขั้นตอนที่ 2

ตั้งค่าการกำหนดค่าเริ่มต้นเป็นส่วนประกอบของคุณ

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

ขั้นตอนที่ 3

ใช้ทั้งหมดเข้าด้วยกัน การกำหนดค่าของคุณจะถูกนำไปใช้กับส่วนประกอบ UILIB เพื่อให้คุณสามารถใช้งานได้ง่ายกับตัวดัดแปลง

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

การบริจาค

ดูคู่มือการสนับสนุน