#javascript #reactjs #react-native #expo
#javascript #reactjs #реагировать-родной #expo
Вопрос:
Просто пытаюсь создать ссылку на компонент VideoPlayer — так как к нему должна прилагаться куча функций воспроизведения Expo video. ?
В документах сказано просто добавить ссылку в параметры videoRef .. так я и сделал:
constructor(props) {
super(props);
this.videoRef = React.createRef();
this.state = {
};
};
<VideoPlayer
videoProps={{
shouldPlay: false,
resizeMode: Video.RESIZE_MODE_CONTAIN,
source: {
uri: this.props.navigation.state.params.videoUrl,
},
}}
videoRef={this.videoRef}
isLooping={true}
inFullscreen={true}
videoBackground='transparent'
height={height}
width={width}
showControlsOnLoad={true}
/>
Результат после рендеринга видео:
this.videoRef == Object { "current": null }
Дальнейшее расследование: в коде — тип Video для videoRef ? Документы, похоже, ожидают ref в качестве типа. Не уверен, что понимаю, как бы я передал Video компонент videoRef param в VideoPlayer компоненте. Это то, что меня немного смущает.
Любая помощь была бы потрясающей — спасибо.
Комментарии:
1. Здравствуйте, не могли бы вы попробовать заменить ‘videoRef={this.videoRef}’ на ‘videoRef={(a) => this.videoRef = a}’ и дать мне знать?
2. А также попробовать ref={(a) => (videoRef = a)} ?
3. Я разобрался в этом и опубликовал ответ — ура.
Ответ №1:
Документация неверна. videoRef ожидается как часть videoProps значения. Также в документах говорится, что ожидаемый тип является ссылкой, это тоже неверно. Код ожидает функцию.
_handleVideoRef = (component) => {
this.videoPlayerRef = component;
}
<VideoPlayer
videoProps={{
videoRef: this._handleVideoRef, /* THIS IS CORRECT*/
shouldPlay: false,
resizeMode: Video.RESIZE_MODE_CONTAIN,
source: {
uri: this.props.navigation.state.params.videoUrl,
},
}}
isLooping={true}
inFullscreen={true}
videoBackground='transparent'
height={height}
width={width}
showControlsOnLoad={true}
/>