#javascript #reactjs #react-native
Вопрос:
Я использую веб-представление для доступа к веб-странице онлайн-радио. На радио есть кнопка для запуска/приостановки потока, и она всегда приостанавливается при запуске, поэтому мне нужно нажать кнопку воспроизведения, чтобы она начала воспроизводиться.
//my code for webView lt;WebView source={{ uri: 'https://mmufmkenya.radio12345.com/' }}/gt; //button that when pressed calls the play function from webView lt;Button onPress={()=gt; playButton()}gt;
Может кто-нибудь, пожалуйста, помочь мне с рабочим фрагментом, который я могу попробовать изучить, или кто-нибудь, кто готов объяснить мне, как будто мне 5 лет
Что я пробовал:
Я читал об injectedJavascript и передаче кода javascript в WebView, но все время терплю неудачу (в первую очередь потому, что я все еще на стадии обучения и не уверен, правильно ли я это делаю)
Прочитав несколько статей и документов, я изменил свой код на:
//I don't know of the correct className but I think it's 'jp-play' const jsCode = "setTimeout(function() { const playButton = document.getElementById('jp-play')}, 2000)"; return( lt;gt; lt;WebView source={{ uri: 'https://mmufmkenya.radio12345.com/' }} javaScriptEnabled={true} injectedJavaScript={jsCode} javaScriptEnabledAndroid={true} /gt; lt;Button onPress={()=gt; playButton()}/gt; lt;/gt; )
Мне просто нужна пользовательская кнопка, которая при нажатии вызывает функцию воспроизведения с веб-страницы
https://mmufmkenya.radio12345.com/
Ответ №1:
Вы пробовали использовать useRef и посмотреть, есть ли какой-либо метод, который вы можете вызвать оттуда ?
Из вашего кода вы пытаетесь получить идентификатор, которого не существует. Вам нужно добавить идентификатор «jp-play» в свой источник. Вот пример из одного из моих предыдущих проектов:
source={{ html: ` lt;iframe id="player1" src="https://player.vimeo.com/video/${vimeoId}?api=1amp;player_id=player1#t=${lastTimecode}s" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreengt;lt;/iframegt; `, }}