yr-panel-ui

猿人 UI 组件库

主题

引入

import { ThemeProvider } from 'yr-panel-ui'

使用

const theme = {
    Button: {
        // 背景色
        primaryColor: '#8D8D8D',
        plainColor: '#fff',
        steadyColor: '#464754',
        disableColor: '#E3E3E3',
        wordColor: 'rgba(0, 0, 0, 0)',
        // 文本颜色
        mainColor: '#B4E555',
        wordTextColor: '#555555', // 文字按钮
        plainBorderColor: '#B4E555',
        plainTextColor: '#B4E555',
        disableTextColor: '#C5C5C5'
    }
    // ...
}

// Your App
const App = () => {
    return (
        <ThemeProvider theme={theme}>
            <YRButton>My Button</YRButton>
        </ThemeProvider>
    )
}

按钮

引入

import { YRButton } from 'yr-panel-ui'

使用

    // type决定按钮的颜色, 可以通过theme自定义
    <YRButton>default</YRButton> // 默认primary
    <YRButton type="primary">primary</YRButton>
    <YRButton type="steady">steady</YRButton>
    <YRButton type="plain">plain</YRButton>
    <YRButton type="disable">disable</YRButton>
    <YRButton type="word">word</YRButton>

对话框

引入

import { YRDialog } from 'yr-panel-ui'

使用

<YRDialog
    visible={visible} // 控制显示隐藏
    title={title} // 标题
    content={content} // 内容
    positiveText={positiveText} // 确定按钮文案
    negativeText={negativeText} // 取消按钮文案
    positiveClick={() => {}} // 确定事件处理
    negativeClick={() => {}} // 取消事件处理
/>

图片

引入

import { YRImage } from 'yr-panel-ui'

使用

// asset 展示本地存储图片
// defaultSource 加载失败时默认图
<YRImage style={{}} uri={''} defaultSource={''} asset />

图片区域选取

引入

import { ImageCrop } from 'yr-panel-ui'

使用

<YRImageCrop
    style={StyleSheet.absoluteFill}
    imgPath={imgPath}
    point={point}
    ref={imageCropRef}
    isEdit={isEdit}
    onResult={onResult}
/>

Loading

引入

import { YRLoading } from 'yr-panel-ui'

使用

<YRLoading isShow={show} />

播放器

引入

import { YRPlayer } from 'yr-panel-ui'

使用

<YRPlayer ref={playerRef} deviceId={''} model={''} onSnapShot={() => {}} />

扫码

引入

import { YRQRScan } from 'yr-panel-ui'

使用

<YRQRScan startScan={startScan} style={StyleSheet.absoluteFill} onScanResult={(event) => {}} />

开关

引入

import { YRSwitch } from 'yr-panel-ui'

使用

<YRSwitch value={switchValue} onValueChange={(val) => {}}></YRSwitch>

topbar

引入

import { yrToast } from 'yr-panel-ui'

使用

yrToast('message', 'topbar')

滚轮选择器

引入

import { YRWheel } from 'yr-panel-ui'

使用

<YRWheel
    style={{ height: w(150), width: w(168) }}
    itemStyle={{ textAlign: 'center' }}
    items={items}
    defaultIndex={defaultIndex}
    onChange={(i) => {
        console.log('i:', i)
    }}
/>