小编Vai*_*rma的帖子

我正在 Expo / React Native 上构建一个基于视频的应用程序，视频播放时有时会出现延迟，有时则不会。

当没有延迟时，点击屏幕会立即转到下一个视频。当出现延迟时，点击屏幕会在几秒钟后转到下一个视频。

我还有一个进度条，指示视频的完成百分比（类似于 Instagram 故事）。如果没有延迟，进度条会在视频播放完毕时立即完成。当出现延迟时，视频播放完毕时进度条通常只完成 75%。

这是我的应用程序的链接：https ://expo.io/@vaibhavverma9/realtalk

我试图弄清楚为什么我的应用程序有时运行缓慢而有时运行顺利。

我使用动画条作为进度条，如果这有帮助的话。

  function ProgressBarsContainer () {

    const width = progressBarWidth(); 
    return (
        <View style={homeStyles.progressBarContainer}>
          {initAnimatedBars(width)}
        </View>
    )
  }

  function initAnimatedBars(width) {
    const animatedBars = []; 

    for (let i = 0; i < currentUserVideoCount; i++){
      if(i < videoIndex){
        animatedBars.push(
          <ProgressBar
             progress={1}
             width={width}
             key={i}

             color="#734f96"
             unfilledColor="#E6E6FA"
             borderColor="#000"
             borderRadius={1}
             height={3}
            />
        )
      } else if (i == videoIndex) {
        animatedBars.push(
          <ProgressBar
            key={i}
            progress={currentProgress}
             width={width}
             color="#734f96"
             unfilledColor="#E6E6FA"
             borderColor="#000"
             borderRadius={1}
             height={3} …

我使用 Vercel 创建了一个 next.js 应用程序，然后使用以下命令行安装了 chakra-ui：

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

它导致了以下错误：

TypeError: Object.fromEntries is not a function
    at inner (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:21:21)
    at /Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:24:22
    at Array.map (<anonymous>)
    at inner (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:21:55)
    at /Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:24:22
    at Array.map (<anonymous>)
    at inner (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:21:55)
    at walkObject (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:31:10)
    at createThemeVars (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/styled-system/dist/cjs/create-theme-vars/create-theme-vars.js:19:25)
    at toCSSVar (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/styled-system/dist/cjs/create-theme-vars/to-css-var.js:28:64)

我尝试修改节点模块...这些是我的依赖项：

"dependencies": {
    "@chakra-ui/react": "^1.6.1",
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@types/react": "^17.0.5",
    "framer-motion": "^4.1.16",
    "next": "10.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "typescript": "^4.2.4"
  }

这是我的 pages/_app.tsx 文件：

import '../styles/globals.css'
import { ChakraProvider } from "@chakra-ui/react" …

我想问一下在 Expo / React Native 上处理视频加载的最佳方法是什么。

Expo 对于处理视频/音频的视频和 AV 组件有很好的文档：\n https://docs.expo.io/versions/latest/sdk/video/ \n https://docs.expo.io/versions/最新/sdk/av/

到目前为止我已经尝试过两件事：\'

\n
1. 在视频组件中使用海报源。这里的问题是海报图像的格式不正确。
\n

这是我的视频组件的样子：

    const videoStyle = { width: \'100%\', height: \'100%\', display: display}; \n    return (\n        <Video\n            ref={playbackObject}\n            source={{uri: source}}\n            posterSource={require(\'path/to/file\')}\n            rate={1.0}\n            volume={1.0}\n            isMuted={isMuted}\n            resizeMode="cover"\n            usePoster={true}\n            shouldPlay={shouldPlay}\n            onPlaybackStatusUpdate={_onPlaybackStatusUpdate}\n            progressUpdateIntervalMillis={50}\n            isLooping\n            style={videoStyle}\n            posterStyle={videoStyle}\n        >\n        </Video>\n    )\n

\n
2. 我\xe2\x80\x99ve还尝试使用playbackStatus来查看视频是否已加载或缓冲，并在视频加载或缓冲时有一个活动指示器，但因为我使用状态，所以存在一些滞后。
\n

我对 (2) 的实现如下所示：

const [loaded, setLoaded] = useState(false); \n\nconst _onPlaybackStatusUpdate = playbackStatus => {\n\n    if(playbackStatus.isBuffering){  \n      if(loaded){\n        setLoaded(false); \n …