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