@uiw/react-native
Version:
UIW for React Native
149 lines (124 loc) • 5.89 kB
Markdown
Empty 空状态
---
空状态时的展示占位图。
<img src="https://user-images.githubusercontent.com/66067296/137707848-8603fc59-3904-437d-9908-53cd621a1a0e.png" style="width:300px;height:620px"/>
### 基础示例
<!--DemoStart-->
```js
import { Empty } from '@uiw/react-native';
const Demo = () => {
render() {
return (
<Empty />
)
}
}
export default Demo
```
<!--End-->
### 自定义文字
<!--DemoStart-->
```js
import { Empty } from '@uiw/react-native';
const Demo = () => {
render() {
return (
<Empty label="冇得数据咯"/>
)
}
}
export default Demo
```
<!--End-->
### 替换默认图标
<!--DemoStart-->
```js
import { Empty } from '@uiw/react-native';
const xml = `
<svg viewBox="0 0 1024 1024" version="1.1" width="200" height="200">
<path d="M65.28 903.68a448 44.928 0 1 0 896 0 448 44.928 0 1 0-896 0Z" fill="#C6C5C5" opacity=".31"></path>
<path d="M665.344 108.672H182.912c-5.76 0-10.624 4.736-10.624 10.624v779.136c0 5.76 4.736 10.624 10.624 10.624h593.92c5.76 0 10.624-4.736 10.624-10.624V230.784l-122.112-122.112z" fill="#F4F4F4"></path>
<path d="M776.96 914.304H183.04c-8.704 0-15.872-7.168-15.872-15.872V119.296c0-8.704 7.168-15.872 15.872-15.872h484.608l125.184 125.184v669.824c0 8.704-7.168 15.872-15.872 15.872zM182.912 114.048c-2.944 0-5.248 2.432-5.248 5.248v779.136c0 2.944 2.432 5.248 5.248 5.248h593.92c2.944 0 5.248-2.432 5.248-5.248V233.088l-119.04-119.04H182.912z" fill="#C6C5C5"></path>
<path d="M702.336 78.72H220.032c-5.76 0-10.624 4.736-10.624 10.624v779.136c0 5.76 4.736 10.624 10.624 10.624h593.92c5.76 0 10.624-4.736 10.624-10.624V200.832l-122.24-122.112z" fill="#FFFFFF"></path>
<path d="M813.952 884.352h-593.92c-8.704 0-15.872-7.168-15.872-15.872V89.344c0-8.704 7.168-15.872 15.872-15.872h484.608l125.184 125.184v669.824c0 8.704-7.168 15.872-15.872 15.872z m-593.92-800.384c-2.944 0-5.248 2.432-5.248 5.248v779.136c0 2.944 2.432 5.248 5.248 5.248h593.92c2.944 0 5.248-2.432 5.248-5.248V203.008l-119.04-119.04H220.032z" fill="#C6C5C5"></path>
<path d="M824.576 206.208H712.96c-8.704 0-15.872-7.168-15.872-15.872V78.72h10.624v111.616c0 2.944 2.432 5.248 5.248 5.248h111.616v10.624z" fill="#C6C5C5"></path>
<path d="M267.136 213.248h123.52" fill="#FFFFFF"></path>
<path d="M267.136 202.624h123.52v21.12h-123.52z" fill="#C6C5C5"></path>
<path d="M328.96 151.424v123.52" fill="#FFFFFF"></path>
<path d="M318.336 151.424h21.12v123.52h-21.12z" fill="#C6C5C5"></path>
<path d="M296.32 770.176h65.28" fill="#FFFFFF"></path>
<path d="M296.32 765.952h65.28v8.448h-65.28z" fill="#C6C5C5"></path>
<path d="M328.96 737.536v65.152" fill="#FFFFFF"></path>
<path d="M324.736 737.536h8.448v65.28h-8.448z" fill="#C6C5C5"></path>
<path d="M857.216 292.096h65.152" fill="#FFFFFF"></path>
<path d="M857.216 287.872h65.28v8.448h-65.28z" fill="#C6C5C5"></path>
<path d="M889.728 259.456v65.28" fill="#FFFFFF"></path>
<path d="M885.632 259.456h8.448v65.28h-8.448z" fill="#C6C5C5"></path>
<path d="M347.264 407.04c0-21.12 6.784-42.496 20.352-64.256 13.568-21.632 33.408-39.68 59.392-53.888 25.984-14.208 56.32-21.376 91.008-21.376 32.256 0 60.672 6.016 85.376 17.792 24.704 11.904 43.776 28.032 57.216 48.512s20.224 42.752 20.224 66.688c0 18.944-3.84 35.456-11.52 49.664-7.68 14.208-16.768 26.496-27.392 36.864-10.624 10.368-29.568 27.776-56.832 52.224-7.552 6.912-13.568 12.928-18.176 18.176-4.608 5.248-7.936 9.984-10.112 14.336-2.176 4.352-3.968 8.704-5.12 13.056-1.28 4.352-3.072 11.904-5.504 22.912-4.224 23.168-17.408 34.688-39.68 34.688-11.52 0-21.248-3.84-29.184-11.392-7.936-7.552-11.776-18.816-11.776-33.664 0-18.688 2.944-34.816 8.704-48.512s13.44-25.728 23.04-35.968c9.6-10.368 22.4-22.656 38.656-36.864 14.208-12.416 24.576-21.888 30.848-28.16 6.4-6.272 11.648-13.44 16-21.12 4.352-7.808 6.528-16.256 6.528-25.344 0-17.792-6.656-32.768-19.84-45.056-13.184-12.288-30.336-18.304-51.2-18.304-24.448 0-42.496 6.144-54.016 18.56-11.52 12.288-21.376 30.464-29.312 54.528-7.552 25.088-21.888 37.632-43.008 37.632-12.416 0-22.912-4.352-31.488-13.184-8.832-8.832-13.184-18.304-13.184-28.544z m162.816 365.568c-13.568 0-25.344-4.352-35.584-13.184-10.112-8.832-15.232-21.12-15.232-36.864 0-13.952 4.864-25.728 14.72-35.328 9.728-9.6 21.76-14.336 35.968-14.336 13.952 0 25.728 4.736 35.328 14.336 9.6 9.6 14.336 21.376 14.336 35.328 0 15.616-4.992 27.776-14.976 36.736-9.856 8.832-21.504 13.312-34.56 13.312z" fill="#D5D5D5"></path>
</svg>
`;
const Demo = () => {
render() {
return (
<Empty label="冇得数据咯" xml={xml}/>
)
}
}
export default Demo
```
<!--End-->
### 自定义图标尺寸
<!--DemoStart-->
```js
import { Empty } from '@uiw/react-native';
const Demo = () => {
render() {
return (
<Empty label="冇得数据咯" size={120} />
)
}
}
export default Demo
```
<!--End-->
### 自定义文字样式
<!--DemoStart-->
```js
import { Empty } from '@uiw/react-native';
const Demo = () => {
render() {
return (
<Empty label="冇得数据咯" labelStyle={{ color: 'red' }} />
)
}
}
export default Demo
```
<!--End-->
### 提示更多内容
<!--DemoStart-->
```js
import { Empty } from '@uiw/react-native';
import {View, Text } from 'react-native';
const Demo = () => {
render() {
return (
<Empty>
<View>
<Text style={{ color: 'red' }}>冇得数据咯</Text>
</View>
</Empty>
)
}
}
export default Demo
```
<!--End-->
### Props
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| label | 设置提示文本 | `string` | - |
| labelStyle | 设置提示音样式 | `TextProps['style']` | - |
| size | 设置图标尺寸 | `number` | - |
| xml | 传递 SVG xml 字符串，自定义图标，设为 `null` 将不展示图标 | `string` | - |
| children | 不光提示文本，还有更多内容，`label` 将不起作用 | `React.ReactNode` | - |