React-Native开发鸿蒙NEXT-video

React-Native开发鸿蒙NEXT-video

前几周的开发,基本把一个"只读型"社区开发的差不多了。帖子列表,详情,搜索都迁移实现了,但还差了一点------视频类型帖子的展示。之前开发RN社区中,对于视频的处理用的是react-native-video,这个三方组件也已经实现了鸿蒙化,部分逻辑可以直接沿用。依赖安装的过程略过不表。具体可以参考

bash 复制代码
https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-video.md#https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-video%2Freleases

之前碰到有人问说那个依赖的har包在哪,这个---这个只要把下载的tgz文件双击解压缩以下,得到的package文件夹内harmony文件夹下就有了哈。

应用之前未鸿蒙化的RN版本,react-native-video用的是2.0.0的一个上古版本,来看下接入现在鸿蒙化三方版本后后需要做哪些调整。直接附上原始代码

typescript 复制代码
              <Video
                ref={videoPlayerRef}
                source={{uri: detail.videoUrl}}
                rate={1.0}
                volume={1.0}
                muted={false}
                paused={!isPlaying}
                //resizeMode={rotateDeg == 0?'cover':'contain'}
                resizeMode={videoResizeMode}
                playWhenInactive={false}
                playInBackground={false}
                ignoreSilentSwitch={'ignore'}
                progressUpdateInterval={250.0}
                onLoadStart={_onLoadStart}
                onLoad={_onLoaded}
                onProgress={_onProgressChanged}
                onSeek={_onSeek}
                onEnd={_onPlayEnd}
                onError={_onPlayError}
                onBuffer={_onBuffering}
                style={{width: '100%', height: '100%'}}
              />

对照文档可以看到如下需要调整的地方,诸如onseek/rate/playWhenInactive等这些属性的不支持对基本操作影响不大(我这因为自己能做主所以就这么说了,上班的同学还得讲究下"向上管理")。

为了处理拖拽进度,使用了react-native-silder,对接可参考

arduino 复制代码
https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-community-slider.md
typescript 复制代码
<Slider
  style={{ flex: 1 }}
  minimumTrackTintColor={xnUtils.getCustomByKey('homeColor')}
  maximumTrackTintColor={'rgba(255,255,255,0.3)'}
  thumbImage={require('../../img/icon_control_slider.png')}
  value={currentTime}
  minimumValue={0}
  maximumValue={Math.round(duration)}
  onValueChange={currentTime => {
    onSliderValueChanged(currentTime);
  }}
  onSlidingComplete={value => {
    videoPlayerRef.current &&
      videoPlayerRef.current.seek(value, 0);
  }}
/>

最后看下使用效果,同样在用爱发电搞这项目的小伙伴反馈目前后台视频上传的问题一时半会还没解决,这里是伪造了数据来验证的,请无视视频播放功能以外的异常情况。。。。。。(西瓜视频上传有问题,视频效果可移步公众号文章查看)

待后台修复后还需调整下UI,对下接口字段的处理。至此,社区已经可以支持富文本显示,图集浏览,视频播放,基本满足主要业务需要。接下去将开始处理bundle的远程更新。


不经常在线,有问题可在微信公众号或者掘金社区私信留言

更多内容可关注

我的公众号悬空八只脚

相关推荐
程序员小刘7 分钟前
如何配置HarmonyOS 5与React Native的开发环境?
react native·华为·harmonyos
0x000719 分钟前
HarmonyOS 应用开发学习记录 - 从Windows开发者视角看鸿蒙开发
华为·typescript·harmonyos·鸿蒙系统
Aisanyi1 小时前
【鸿蒙开发从入门到放弃】新建项目,并接入Git
github·harmonyos
空潭冷月1 小时前
HarmonyOS5:卡牌游戏开发
harmonyos
二流小码农2 小时前
鸿蒙开发:一文了解桌面卡片
android·ios·harmonyos
勿念4362 小时前
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
华为·harmonyos
xq95272 小时前
鸿蒙next 带你玩转Web组件拉起相机进行拍照
harmonyos
BenChuat3 小时前
期末考试复习总结-第一章《HarmonyOS介绍》
harmonyos
勿念4363 小时前
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
华为·harmonyos
zacksleo4 小时前
鸿蒙Flutter实战:25-混合开发详解-5-跳转Flutter页面
前端·flutter·harmonyos