React-Native 中图片的显示有多种方式，其中两种比较重要:1 网络图片，需要加权限才能显示，配置形式如下:

var tokenDynamic = 'Bearer ' + ret; //获取的token
this.setState({
      avatarSource: {
        uri: pathPhoto,      //访问的链接
        width: 100,
        height: 100,
        headers: {
          Authorization: tokenDynamic, //注意这里的key
        },
      },
    });

2 本地图片的显示，需要你加入编码格式才能显示出来,如下:

  

var imgData ="xxx";//本地选择出来后是二进制数据
this.setState({
      avatarSource: {
        uri: 'data:image/png;base64,' + imgData, //前面的编码格式很重要，否则显示不出来
        width: 100,
        height: 100,
      },
    });

 

Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

OpenHarmony环境下React Native：自定义useFullscreen全屏控制

在移动应用开发中，全屏控制是构建沉浸式体验的关键功能，尤其在视频播放、游戏和阅读类应用中至关重要。React Native作为跨平台框架，其标准API并未提供统一的全屏控制方案，而OpenHarmony 6.0.0 (API 20)平台又有其独特的窗口管理机制，这使得开发者需要构建自定义解决方案。本文深入探讨了在OpenHarmony 6.0.0 (API 20)环境下实现React Native

avatar 开源鸿蒙跨平台开发者社区

React Native鸿蒙：自定义useSearchParams地址栏参数

在Web开发中，是React Router提供的一个便捷钩子，用于获取和操作URL查询参数。然而，在React Native生态系统中，官方并未提供类似功能，特别是在OpenHarmony这样的新兴平台上，URL参数处理面临着独特挑战。自定义统一不同平台（iOS、Android、OpenHarmony）的URL参数处理方式提供类似Web开发的便捷API，降低开发复杂度支持参数的实时监听和动态更新适

avatar 开源鸿蒙跨平台开发者社区

React Native + OpenHarmony：自定义useOnline在线状态检测

网络连接状态直接影响应用功能的可用性和用户体验。用户尝试提交数据时突然失败资源加载超时却无明确提示后台同步机制浪费电量和流量缓存策略失效造成数据不一致自定义useOnlineHook正是为解决这些问题而设计，它提供了一种轻量级、可预测的方式来管理应用的网络状态，相比直接使用NetInfo特性标准NetInfo自定义useOnline优势说明响应速度依赖原生事件，延迟较高本地状态管理，即时响应减少U

avatar 开源鸿蒙跨平台开发者社区