我的目标是根据视频的播放时间确定子组件的可见性。通过map方法可以渲染称为InfoElement的组件。
{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);
}
我想做的是将currentPlaybackTimeInSeconds
与startingTime
和endingTime
进行比较,并使infoElement组件仅在currentPlaybackTimeInSeconds
在startingTime
和endingTime
之间时才可见。我的问题是我没有一个infoElement,而是一个列表,所以我不知道如何引用它们。这个想法将是更新每个状态,但是我不知道该怎么做。有什么建议吗?感谢所有能回答我的问题。
您需要对这一想法进行反驳。您应该做的是告诉每个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
传递给每个InfoElement
。在InfoElement
内部,我们对照currentTime
和startingTime
检查传入的endingTime
,如果在这些边界之内,则渲染元素,否则返回null。
[Notes
<></>
)而不是div
或View
,因为我不知道您的目标是React Native还是ReactDOM或其他渲染引擎。