0

我的目标是根据视频的播放时间来计算子组件的可见性。这个名为 InfoElement 的组件是通过 map 方法呈现的。

{this.props.sceneNavigator.viroAppProps.tours[this.state.tourId].scenes[this.state.sceneId].infoElements.map((infoElement, key) => {
return (
    <InfoElement 
        content={{uri: infoElement.poiImage}}
        startingTime = {infoElement.startingTime}
        endingTime = {infoElement.endindTime}
        contentCardScale={[5, 5, 5]} 
        position={polarToCartesian(infoElement.coordinate)}/>
    )
    })}

在父级内部，有一个回调，_onUpdateTime(currentPlaybackTimeInSeconds, totalPlayBackDurationInSeconds)当视频的当前播放位置发生变化时调用。

<Viro360Video
    source={{uri:this.props.sceneNavigator.viroAppProps.tours[this.state.tourId].scenes[this.state.sceneId].backgroundSource}}
    onBufferEnd={this.onLoadEnded}
    onUpdateTime={this._onUpdateTime}
    rotation={[0, 0, 0]}
    onError={this.onError}/>

    _onUpdateTime(currentPlaybackTimeInSeconds, totalPlayBackDurationInSeconds) {
  this.setState({
                  visible : false,
               });

           console.log(currentPlaybackTimeInSeconds);
        }

我想要做的是比较currentPlaybackTimeInSecondswith startingTimeandendingTime并使 infoElement 组件仅在currentPlaybackTimeInSeconds介于startingTimeand之间时可见endingTime。我的问题是我没有一个 infoElement，而是一个列表，所以我不知道如何引用它们中的每一个。这个想法是更新他们每个人的状态，但我不知道该怎么做。有什么建议吗？感谢所有会回答我的人。

4

1 回答 1

0

你需要颠倒你的想法。您应该做的是告诉每个 InfoElement 当前时间是什么，然后它们根据该时间更改其渲染输出。像这样的东西：

const React = require('react');
const {useState,useCallback} = React;

const InfoElement = ({currentTime,startingTime,endingTime}) => {
    if(currentTime >= startingTime && currentTime < endingTime){
        return (
            <>
                {/* Your render code here*/}
            </>
        );
    }
    else {
        return null;
    }
}

const App = ({sceneNavigator}) => {
    const [currentTime,setCurrentTime] = useState(-1);
    const [tourId,setTourId] = useState(-1);
    const [sceneId,setSceneId] = useState(-1);

    const onUpdateTime = useCallback((time) => {
        setCurrentTime(time);
    },[]);

    let infoElements = [];
    if(sceneNavigator.viroAppProps.tours[tourId] != null && sceneNavigator.viroAppProps.tours[tourId].scenes[sceneId] != null){
        infoElements = sceneNavigator.viroAppProps.tours[tourId].scenes[sceneId].infoElements;
    }

    return (<>
        <Viro360Video
            onUpdateTime={onUpdateTime}

        />

        {infoElements.map((infoElement, key) => (
            <InfoElement
                key={`infoElement-${key}`}
                content={{uri: infoElement.poiImage}}
                startingTime = {infoElement.startingTime}
                currentVideoTime={currentTime}
                endingTime = {infoElement.endindTime}
                contentCardScale={[5, 5, 5]} 
                position={polarToCartesian(infoElement.coordinate)}/>
            )
        )}
    </>);
}

在此，您可以看到我们正在挂钩Viro360Video onUpdateTime并设置一个currentTime状态。然后我们将 传递currentTime给 each InfoElement。在里面InfoElement我们检查currentTime传入的startingTime和endingTime，如果我们在这些范围内，我们渲染我们的元素，否则，我们返回null。

笔记

  1. 我在功能组件中使用钩子而不是使用反应类。在这里查看它们的用法：https ://reactjs.org/docs/hooks-intro.html
  2. 我使用 Fragments ( <></>) 而不是 adiv或 aView因为我不知道您的目标是 React Native 还是 ReactDOM 或其他渲染引擎。
于 2019-12-24T17:36:14.667 回答