在 Snack 中使用图像

有时，任务是从移动设备中选择图像，然后在应用程序中显示这些图像。为此，可以使用 expo-image-picker 中的 ImagePicker。在本文中，展示了 React Native 和 Javascript 代码，其中包含两个不同的示例，第一个示例使用 React Native 组件“Image”来选择图像、调整大小并显示它。在另一个示例中，展示了从计算机或移动设备选择图像的方法，然后将其渲染到设备屏幕上。

示例 1：使用 React Native 调整图像大小并显示图像。

算法

  • 步骤 1 − 从 'react-native' 中导入 View 和 Image。

  • 步骤 2 − 创建 App.js 并编写代码，以在将本地图像上传到项目的 asset 文件夹后使用它。

  • 步骤 3 − 通过点击图像名称来检查图像大小。在显示原始大小图像时，在 style 部分指定相同的宽度和高度。

  • 步骤 4 − 为了在所有方向上等比例增加图像大小，请将图像大小乘以相同的值。

  • 步骤 5 − 为了在所有方向上等比例减小图像大小，请将图像大小除以相同的值。

  • 步骤 6 − 向宽度和高度添加相同的值也可以使图像大小在所有方向上等比例变化。

项目中使用的重要文件是

  • App.js

  • Asset 文件夹包含图像“bluestar.jpg”。当点击图像的文件名时，会显示图像的原始大小。例如，它显示为 136*112 (bluestar.jpg)。

App.js：这是此项目的 Javascript 主文件。

示例

import React from 'react';
import {View , Image} from 'react-native';

//displaying and controlling the size of the image

export default class App extends React.Component {
   render() {
      return (
         <View>
            <Image source = {require('./assets/bluestar.jpg')} 
            style = {{ width: 112, height: 136}}/>
            <Image source = {require('./assets/bluestar.jpg')} 
            style = {{ width: 112*2, height: 136*2}}/>
            <Image source = {require('./assets/bluestar.jpg')} 
            style = {{ width: 112/2, height: 136/2}}/>
            <Image source = {require('./assets/bluestar.jpg')} 
            style = {{ width: 112+50, height: 136+50}}/>

         </View>
      );
   }
}

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

查看结果 - 示例 1

结果可以在线查看。当用户输入代码时，Web 视图会默认被选中，结果会立即显示。

图：在 Snack 的 Web 视图中调整图像大小并显示。

示例 2：使用 ImagePicker 从设备中选择图像，然后显示它。

算法

  • 步骤 1 − 从 'react-native' 中导入 Image、View、StyleSheet 和 Button。从 'expo-image-picker' 中导入 ImagePicker。

  • 步骤 2 − 创建 App.js 并编写使用 MediaLibrary.requestPermissionsAsync() 和 ImagePicker.launchImageLibraryAsync() 函数的代码。

  • 步骤 3 − 创建一个按钮，点击它可以从计算机/移动设备中选择图像。

  • 步骤 4 − 定义图像样式，然后显示图像。

项目中使用的重要文件是

  • App.js

App.js：这是此项目的 Javascript 主文件。

示例

import * as React from 'react';
import { Image, View, StyleSheet, Button } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

export default class SelectImageAndShow extends React.Component {
   state = {
      theimage: null
   }

   getPermissionAsync = async () => {
      const { status } = await MediaLibrary.requestPermissionsAsync();
   }

   picktheImage = async () => {
      let resultimg = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.All,
         allowsEditing: true,
         aspect: [4, 3],
         quality: 1
      });

       if (!resultimg.cancelled) {
         this.setState({ theimage: resultimg.uri });
      }
   }

   render() {
      const { theimage } = this.state;
      return (
         <View style={styles.thespace}>

            <View style={{width:"90%", justifyContent:"center", margin:20 }}>
            <Button title="Select the image from your device" color="#A42585"width="50%"onPress={this.picktheImage}/>
            </View>

            {theimage && <Image style={{ justifyContent:"center", width: 300, height: 300, margin:20}} source={{ uri: theimage }}/>}

         </View>
      );
   }
}

const styles = StyleSheet.create({
   thespace: {
      flex: 1,
      justifyContent: 'center',
      backgroundColor: '#000',
   },
});

查看结果 - 示例 2

结果可以在线查看。当用户输入代码时，Web 视图会默认被选中，结果会立即显示。当用户点击按钮时，会打开从计算机中选择图片的文件夹。当用户选择图像时，它会显示在屏幕上。如果用户在移动设备上使用该应用程序，ImagePicker 会提供从移动设备中选择图片的选项。两种情况下的结果都显示在此处。

图：显示使用 Web 视图从计算机中选择图片的选项。

图：显示使用 Web 视图从计算机中选择图片后的图像。

图：显示从移动设备中选择图片后，在个人移动设备上的图像。

本文通过两个不同的示例，介绍了在 Expo Snack 中显示图像的方法。首先，介绍了将图像本地存储在项目中的方法，然后介绍了获取图像并显示它的过程。示例 2 还指定了从计算机和移动设备中选择图像，然后在屏幕上显示它的方法。此外，还显示了在线 Web 视图和个人移动设备上的输出。

更新于：2023年5月2日

673 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告