react-native-video를 사용하여 내 앱의 비디오 플레이어를 렌더링합니다.
비디오 소스를 변경하려고합니다. 이것은 내 코드가 잘 실행됩니다.
<Video
source={{uri: _getVideo().video_url}}
style={Styles.backgroundVideo}
autoplay={true}
controls={false}
disableFocus={true}
resizeMode="cover"
/>;
하지만 'controls = {true}'를 변경합니다. 새 비디오를 렌더링하지 않고 오디오 만 렌더링합니다. 그리고 여전히 오래된 비디오를 보여줍니다.
_getVideo().video_url
이 함수는 소스 비디오 만 반환합니다. 요소도 소스를 변경하지만 새 비디오를 다시 렌더링하지는 않습니다.
이를 해결할 해결책이 있습니까?
작동하지만 잘못된 방식으로 수행하고 있습니다.
하지만 여기서 무슨 일이 일어나고 있는지 말씀 드리겠습니다.
source={{uri: _getVideo().video_url}}
이 줄은 render 메서드가 실행될 때마다 실행되며, render 메서드는 setState, props 변경 및 기타 이벤트 후에 호출됩니다.
따라서 _getVideo()메서드는 필수는 아니지만 여러 번 호출됩니다.
따라서 URL에 대해 하나의 상태 변수를 초기화하는 것이 좋습니다. 원하는 곳에서 _getVideo ()를 호출하십시오. 첫 번째 실행 및 이후 버튼 클릭 또는 원하는 다른 것을 위해 componentDidMount에있을 수 있지만 _getVideo 메소드의 setState를 사용 하여이 URL을 해당 상태로 설정하십시오.
그래서 원하는 것은 이렇습니다.
<Video
key={this.state.videoComponentKey}
source={{uri: this.state.video_url}}
style={Styles.backgroundVideo}
autoplay={true}
controls={false}
disableFocus={true}
resizeMode="cover"
/>;
이제 내가 소품을 하나 더 추가 한 것을 눈치 챘다면 key이것은 이전 비디오 문제를 해결할 것입니다. URL이 변경 될 때마다 키의 내용이 변경됩니다. 그래서 한 가지 상태를 가져 와서이 소품에 전달했습니다. 이제 0으로 초기화하고 다음에 setState를 사용하여 증가시킬 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다