# React Native 头像库：在 React Native 中使用 DiceBear
DiceBear 可以通过带有 SVG 渲染器的 JavaScript 库在 React Native 中使用，也可以通过内置的 `Image` 组件使用 HTTP API 的 PNG 格式。API 方案不需要 SVG 库。
你可以通过 [React Native](https://reactnative.dev/) 使用 DiceBear，方式可以是
[JS-Library](https://dicebear.zhcndoc.com/how-to-use/js-library/) 或
[HTTP-API](https://dicebear.zhcndoc.com/how-to-use/http-api/)。
## Using JS libraries
You need an SVG library to render avatars. In our example, we use the package
[react-native-svg](https://www.npmjs.com/package/react-native-svg).
```
npm install react-native-svg
```
```jsx
import { useMemo } from 'react';
import { View } from 'react-native';
import { Style, Avatar } from '@dicebear/core';
import lorelei from '@dicebear/styles/lorelei.json' with { type: 'json' };
import { SvgXml } from 'react-native-svg';
const style = new Style(lorelei);
export default function UserAvatar({ seed = 'Alice' }) {
const avatar = useMemo(() => {
return new Avatar(style, {
seed,
size: 128,
// ... 其他选项
}).toString();
}, [seed]);
return (
);
}
```
## 使用 HTTP API
使用 HTTP API 时，你可以使用 PNG 格式和内置的 `Image` 组件，
而无需任何额外依赖。
```jsx
import { useMemo } from 'react';
import { Image, View } from 'react-native';
export default function Avatar({ seed = 'Alice' }) {
const avatar = useMemo(() => {
const url = new URL('https://api.dicebear.com/10.x/lorelei/png');
url.searchParams.set('seed', seed);
url.searchParams.set('size', '128');
// ... 其他选项
return url.href;
}, [seed]);
return (
);
}
```