You need to enable JavaScript to run this app.
最新活动
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

从安卓React-Native + Expo的手机本地存储加载图像

首先,你需要使用Expo的ImagePicker库来选择图片,并将选中的图片保存到手机本地存储中。然后,你可以使用React-Native的Image组件来加载本地存储的图片。

以下是一个示例代码,演示了如何使用Expo的ImagePicker库选择图片,并将其保存到手机本地存储中,然后使用React-Native的Image组件加载该图片:

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

export default function App() {
  const [imageUri, setImageUri] = useState(null);

  useEffect(() => {
    (async () => {
      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
      if (status !== 'granted') {
        alert('需要访问相册权限!');
      }
    })();
  }, []);

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

      if (!result.cancelled) {
        const fileName = result.uri.split('/').pop();
        const destinationUri = FileSystem.documentDirectory + fileName;
        await FileSystem.copyAsync({
          from: result.uri,
          to: destinationUri,
        });
        setImageUri(destinationUri);
      }
    } catch (error) {
      console.log('选择图片出错:', error);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="选择图片" onPress={selectImage} />
      {imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
    marginTop: 20,
  },
});

在上面的代码中,我们首先导入了需要使用的组件和库。然后,我们使用useState钩子来定义一个名为imageUri的状态变量,用于存储选择的图像的本地存储URI。

在useEffect钩子中,我们请求用户授予访问相册的权限。如果用户未授予权限,我们会显示一个警告提示框。

selectImage函数使用ImagePicker.launchImageLibraryAsync方法来打开相册,并允许用户选择图片。选择的图片将被复制到应用的文档目录中,并将其URI存储在imageUri状态变量中。

最后,我们在视图中渲染一个按钮,当用户点击该按钮时,调用selectImage函数。如果选择了图片,我们使用Image组件来显示该图片。

请注意,为了使上述代码正常工作,你需要在项目中安装expo-image-picker和expo-file-system库。你可以使用以下命令进行安装:

expo install expo-image-picker
expo install expo-file-system

希望上述解决方法能够帮助到你!

本文内容通过AI工具匹配关键字智能整合而成,仅供参考,火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见,您可以通过联系service@volcengine.com进行反馈,火山引擎收到您的反馈后将及时答复和处理。
展开更多
面向开发者的云福利中心,ECS 60元/年,域名1元起,助力开发者快速在云上构建可靠应用

社区干货

封装一个ReactNative列表状态管理,对比hook和class的区别|社区征文

使用JavaScript来开发安卓和IOS应用环境搭建就跟着官网来就好了 https://reactnative.dev/docs/environment-setup我们这里选择用Typescript的模板```npx react-native init AwesomeTSProject --template re... pagination: IPagination;}export interface IPagination { current: number; pageSize: number; total: number;}```有了这些属性,在组件中就可以正常的渲染列表了 ## clean-js 使用方法在此之前...

Flutter, 终究还是选择了你

ReactNative和Flutter,以至于多端融合成为大前端新的发展趋势。关于这方面的内容我去年还专门写了一篇技术博客《基于React Native浅谈多端融合技术》,感兴趣的同学可以点击文章底部的链接进行阅览。刚开始接触ReactNative是在去年6月份,当时部门要做一个内部办公平台APP,想尝试下新技术,就选了比较火热的ReactNative。当时我被派去开发这个项目时,整个人是懵逼的,因为啥都不懂呀。因为我当时主要负责Android开发的相关工作,对于...

我与 Android 故事|社区征文

从一名入门小白,成为一名中高级工程师的心路例程,帮助自己回望过去展望未来。```### 2.Android初识```2015年,是一个大众创业万众创新热潮、“互联网 +”行动计划、分享经济的年份,还是智能手机增量市场的年份... 有次听到朋友讲起Android系统,很多国产智能手机的操作系统便是Android(安卓(Android)是一种基于Linux内核(不包含GNU组件)的自由及开放源代码的操作系统。主要使用于移动设备,如智能手机和平板电脑,由美国Google公司...

如何打造一款优秀的跨平台APP暨跨平台APP开发经验总结|社区征文

也需要下载安装到手机,但是 App 里面打开的页面既可以是 Web 的,又可以是原生的。H5 页面会跑在 Native 一个叫做 `WebView` 的容器里面,只要有 WebView,一套代码可以很容易跨iOS、安卓、Web、小程序、快应用多个平台。可以简单理解为在 App 里面打开了一个 Chrome 浏览器,在这个浏览器里面打开一个 Tab 去加载线上或者本地的 H5 页面,这样还可以实现打开多 `WebView` 来加载多个页面。以上只是描述了`Hybrid App`开发的优势所...

特惠活动

热门爆款云服务器

100%性能独享,更高内存性能更佳,学习测试、web前端、企业应用首选,每日花费低至0.55元
60.00/1212.00/年
立即购买

域名注册服务

cn/top/com等热门域名,首年低至1元,邮箱建站必选
1.00/首年起32.00/首年起
立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗,加速分发更实惠
2.00/20.00/年
立即购买

从安卓React-Native + Expo的手机本地存储加载图像-优选内容

封装一个ReactNative列表状态管理,对比hook和class的区别|社区征文
使用JavaScript来开发安卓和IOS应用环境搭建就跟着官网来就好了 https://reactnative.dev/docs/environment-setup我们这里选择用Typescript的模板```npx react-native init AwesomeTSProject --template re... pagination: IPagination;}export interface IPagination { current: number; pageSize: number; total: number;}```有了这些属性,在组件中就可以正常的渲染列表了 ## clean-js 使用方法在此之前...
React Native SDK 集成与埋点
1. 集成 增长营销套件 SDK 1.1 集成React Native插件Shell 当前最新版本为 0.2.11npm i rangers_applog_reactnative_plugin 1.2 集成 iOS 原生端依赖 1.2.1 集成iOS SDK如您使用CocoaPods远程集成,请参考iOS SDK集成1.1~1.4小节;如您需手动引入集成,请参考1.5小节。 1.2.2 配置Scheme(可选)如需使用实时埋点检测功能,请参考iOS SDK集成 第3节,配置Scheme。 1.3 集成 Android 原生端依赖 1.3.1 集成Android SDK如您使用远程集成...
React Native SDK 集成与埋点
1. 集成 增长营销套件 SDK 1.1 集成React Native插件Shell 当前最新版本为 0.2.11npm i rangers_applog_reactnative_plugin 1.2 集成 iOS 原生端依赖 1.2.1 集成iOS SDK如您使用CocoaPods远程集成,请参考iOS SDK集成1.1~1.4小节;如您需手动引入集成,请参考1.5小节。 1.2.2 配置Scheme(可选)如需使用实时埋点检测功能,请参考iOS SDK集成 第3节,配置Scheme。 1.3 集成 Android 原生端依赖 1.3.1 集成Android SDK如您使用远程集成...
React Native SDK 集成与埋点
1. 集成 增长营销套件 SDK 1.1 集成React Native插件shell 当前最新版本为 0.2.11npm i rangers_applog_reactnative_plugin1.2 集成 iOS 原生端依赖1.2.1 集成iOS SDK如您使用CocoaPods远程集成,请参考iOS SDK集成1.1~1.4小节;如您需手动引入集成,请参考1.5小节。 1.2.2 配置Scheme(可选)如需使用实时埋点检测功能,请参考iOS SDK集成 第3节,配置Scheme。 1.3 集成 Android 原生端依赖1.3.1 集成Android SDK如您使用远程集成,请参...

从安卓React-Native + Expo的手机本地存储加载图像-相关内容

我与 Android 故事|社区征文

从一名入门小白,成为一名中高级工程师的心路例程,帮助自己回望过去展望未来。```### 2.Android初识```2015年,是一个大众创业万众创新热潮、“互联网 +”行动计划、分享经济的年份,还是智能手机增量市场的年份... 有次听到朋友讲起Android系统,很多国产智能手机的操作系统便是Android(安卓(Android)是一种基于Linux内核(不包含GNU组件)的自由及开放源代码的操作系统。主要使用于移动设备,如智能手机和平板电脑,由美国Google公司...

React Native 全埋点

1. 接入全埋点 1.1 JS 代码支持全埋点的最低版本要求: react-native >= 0.62.0 react-navigation >= 6.0.0 rangers_applog_reactnative_plugin >= 0.2.0 react-navigation 目前仅支持 navigators: Stack Native Stack Bottom Tabs 注:若混合使用其他未支持的 navigator,可能影响全埋点采集 shell npm install rangers_applog_reactnative_plugin 1.2 Android 代码通过 Application 集成,或者通过 Lifecycle 集成,两种方法二选一...

React Native 全埋点

1. 接入全埋点 1.1 JS 代码支持全埋点的最低版本要求: react-native >= 0.62.0 react-navigation >= 6.0.0 rangers_applog_reactnative_plugin >= 0.2.0 react-navigation 目前仅支持 navigators: Stack Native Stack Bottom Tabs 注:若混合使用其他未支持的 navigator,可能影响全埋点采集 shell npm install rangers_applog_reactnative_plugin 1.2 Android 代码通过 Application 集成,或者通过 Lifecycle 集成,两种方法二选一...

热门爆款云服务器

100%性能独享,更高内存性能更佳,学习测试、web前端、企业应用首选,每日花费低至0.55元
60.00/1212.00/年
立即购买

域名注册服务

cn/top/com等热门域名,首年低至1元,邮箱建站必选
1.00/首年起32.00/首年起
立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗,加速分发更实惠
2.00/20.00/年
立即购买

React Native 全埋点

1. 接入全埋点 1.1 JS 代码支持全埋点的最低版本要求: react-native >= 0.62.0 react-navigation >= 6.0.0 rangers_applog_reactnative_plugin >= 0.2.0 react-navigation 目前仅支持 navigators: Stack Native Stack Bottom Tabs 注:若混合使用其他未支持的 navigator,可能影响全埋点采集 shell npm install rangers_applog_reactnative_plugin1.2 Android 代码通过 Application 集成,或者通过 Lifecycle 集成,两种方法二...

如何打造一款优秀的跨平台APP暨跨平台APP开发经验总结|社区征文

也需要下载安装到手机,但是 App 里面打开的页面既可以是 Web 的,又可以是原生的。H5 页面会跑在 Native 一个叫做 `WebView` 的容器里面,只要有 WebView,一套代码可以很容易跨iOS、安卓、Web、小程序、快应用多个平台。可以简单理解为在 App 里面打开了一个 Chrome 浏览器,在这个浏览器里面打开一个 Tab 去加载线上或者本地的 H5 页面,这样还可以实现打开多 `WebView` 来加载多个页面。以上只是描述了`Hybrid App`开发的优势所...

转型,技术人绕不开的坎

从研究生毕业到现在差不多工作4年,中间也经历了几次大大小小的转型,毕业跨专业找工作,从底层硬件到操作系统,再到上层应用,目前除了Android原生,也会兼任H5。每一次的选择不能说是完全转型,只是在原有的基础上进行了... 当时还以为只有阿里的咸鱼团队在用,前几天看到一篇文章才了解到除了咸鱼,微信和美团在Flutter方向也有比较多的开发实践。微信小程序,最开始采用Webview渲染方案,后面又采用了React-Native-Like方案,再后来微信提...

Mobile App 适配性优化实战| 社区征文

`,其中,`contentHeight`通过如下方式计算所得:```import { Dimensions } from 'react-native';const { width, height } = Dimensions.get('window');const contentHeight = height - Dimens.headerHeight - D... const safeAreaBottom = NativeModules.AppDimens.safeAreaBottom; SAFE_AREA_BOTTOM = safeAreaBottom;}export const Dimens = { headerHeight: NAVIGATION_HEIGHT + STATUSBAR_HEIGHT, // header高度(状...

不断突破,稳中求进——我的移动端跨平台开发技术回顾与展望| 社区征文

[React Native](https://www.react-native.cn/) 诞生于 2013 年的 **Facebook** 内部黑客马拉松(hackathon)。在 2017 年 Google I/O 大会上,Google 首次发布 [Flutter](https://flutter.dev/) ,其是 Google 发布... 接下来就需要了解当前项目启动后文件加载顺序,当你对项目启动原理大致掌握后,后期对项目进行优化时,心里就会有底气,因为你已明白应在何时针对哪支文件做何处理。> > - 目前大部分的跨平台开发技术栈都是开源的,这...

六年安卓开发的技术回顾和展望 | 社区征文

一方面是对手机坏了的伤痛,另一方面也是对无法继续做 WinPhone 开发很遗憾。对于当时的我来说,再换一台 WinPhone 过于昂贵,只好换一台更加便宜的安卓机,因此也就转向学习安卓开发。后面的故事大家都知道了,因为... 在学习安卓开发时,我先看了一本明日科技的《Android 入门到精通》,然后看了些校内网的视频,逐渐可以做一些简单的应用。安卓开发所见即所得的特点,让我**很快就可以得到正反馈**。后来又去参加一些地方性的比赛,获...

特惠活动

热门爆款云服务器

100%性能独享,更高内存性能更佳,学习测试、web前端、企业应用首选,每日花费低至0.55元
60.00/1212.00/年
立即购买

域名注册服务

cn/top/com等热门域名,首年低至1元,邮箱建站必选
1.00/首年起32.00/首年起
立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗,加速分发更实惠
2.00/20.00/年
立即购买

产品体验

体验中心

云服务器特惠

云服务器
云服务器ECS新人特惠
立即抢购

白皮书

一图详解大模型
浓缩大模型架构,厘清生产和应用链路关系
立即获取

最新活动

爆款1核2G共享型服务器

首年60元,每月仅需5元,限量秒杀
立即抢购

火山引擎增长体验专区

丰富能力激励企业快速增长
查看详情

数据智能VeDI

易用的高性能大数据产品家族
了解详情

一键开启云上增长新空间

立即咨询