React-Native开发鸿蒙NEXT-video

悬空八只脚2

于 2025-03-23 20:44:21 发布

阅读量472

点赞数 5

分类专栏： React-Native开发鸿蒙NEXT 文章标签： harmonyos 华为

本文链接：https://blog.youkuaiyun.com/m0_62494390/article/details/146461601

版权

React-Native开发鸿蒙NEXT 专栏收录该内容

28 篇文章

订阅专栏

React-Native开发鸿蒙NEXT-video

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

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的一个上古版本，来看下接入现在鸿蒙化三方版本后后需要做哪些调整。直接附上原始代码

              <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，对接可参考

https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-community-slider.md

<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);
  }}
/>