如何在 react-native 中创建头像？

React-native 是 Facebook 开发的一个框架，用于在一种通用语言 JavaScript 下为 iOS 和 Android 创建原生风格的应用程序。最初，Facebook 只开发了 React Native 来支持 iOS。但是，由于最近支持 Android 操作系统，该库现在可以为这两个平台呈现移动 UI。

先决条件：

• reactjs的基础知识。
• 具有 ES6 语法的 Html、css 和 javascript。
• NodeJs 应该安装在您的系统中（安装）。
• Jdk 和 android studio 用于在模拟器上测试您的应用程序（安装）。

方法：在本文中，我们将使用react-native-paper库创建 3 种不同类型的头像。 Avatar 以图标、图像或文本的形式用于表示目的。在我们的项目中，我们将使用材料设计创建所有这些头像。我们将逐步了解该方法。

下面是分步实现：

第 1 步：使用以下命令创建一个 react-native 项目：

npx react-native init DemoProject 

第 2 步：使用以下命令安装 react-native paper：

npm install react-native-paper

第 3 步：使用以下命令启动服务器：

npx react-native run-android

第 4 步：安装图标和深度链接的依赖项：

npm i react-native-vector-icons
react-native link react-native-vector-icons

第 5 步：现在转到您的项目并创建一个组件文件夹。在 components 文件夹中，创建一个 Avatar.js 文件。

项目结构：它看起来像这样。

实现：在各自的文件中写下代码。

Avatar.js

import React from "react";
import { Text, View, StyleSheet } from "react-native";
import { Avatar } from "react-native-paper";
  
const AvatarExample = () => {
    return (
        
            Avatar Icon example
            
  
            Avatar Image example
            
            Avatar Text example
            
        
    );
};
  
export default AvatarExample;
  
const styles = StyleSheet.create({
    container: {
        margin: 30,
    },
    text: {
        marginBottom: 20,
        fontSize: 30,
    },
});

应用程序.js

import React from "react";
import type { Node } from "react";
import { View } from "react-native";
import AvatarExample from "./components/Avatar";
  
const App: () => Node = () => {
    return (
        
            
        
    );
};
  
export default App;

运行应用程序的步骤：使用以下命令运行应用程序：

npx react-native run-android

输出：