反应原生图像组件

在本文中，我们将了解如何在 react-native 中添加图像。为此，我们将使用 Image 组件。它用于在 react-native 中添加图像。

句法：

图片中的道具：

• 可访问性：如果其值为真，则表明该图像是可访问性元素。
• 可访问性标签：是用户与图像交互时阅读器读取的文本。
• blurRadius：模糊滤镜的半径。
• capInsets：如果图像被调整大小，那么角的大小由 capInsets 指定。
• defaultSource：图片加载时显示的静态图片。
• fadeDuration：淡入淡出动画。
• loadingIndicatorSource：它表示用于渲染图像的加载指示器的资源。
• onError：加载错误时调用。
• onLayout：挂载和布局发生变化时调用。
• onLoad：图片加载成功时调用。
• onLoadEnd：图片加载成功或失败时调用。
• onLoadStart：图片开始加载时调用。
• onPartialLoad：加载部分图片时调用。
• onProgress：在下载进度时调用。
• progressRenderingEnabled：如果为 true，则启用渐进式 jpeg 流。
• resizeMethod：用于调整图像大小。
• 来源：它是图像的来源。
• style：用于提供样式。
• testID：要在 UI 自动化测试脚本中使用的此元素的唯一标识符。

图像中的方法：

• abortPrefetch()：中止预取请求。
• getSize()：它在显示图像之前检索图像的宽度和高度（以像素为单位）。
• getSizeWithHeaders()：它在显示图像之前检索图像的宽度和高度（以像素为单位），并能够为请求提供标头。
• prefetch()：它是一个远程图像，供以后通过将其下载到磁盘缓存中使用。
• queryCache()：它执行缓存查询。
• resolveAssetSource()：它将资产引用解析为具有 uri、width 和 height 属性的对象。

现在让我们从实现开始：

• 第 1 步：打开终端并通过以下命令安装 expo-cli。

  npm install -g expo-cli

• 第2步：现在通过以下命令创建一个项目。

  expo init myapp

• 第 3 步：现在进入您的项目文件夹，即 myapp

  cd myapp

项目结构：它将如下所示。

示例：现在让我们实现 Image。在这里，我们创建了一个按钮，当有人单击该按钮图像时将显示。

应用程序.js

App.js

import React , {useState} from 'react';
import { StyleSheet, View ,Image , Button } from 'react-native';
export default function App() {
  const [image , setImage] = useState(false);
  return (
    
      
        
      
      {setImage(!image)}}
      />
    
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image : {
    display : "none",
  }
});

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

参考： https://reactnative.dev/docs/image