Как создать пользовательскую кнопку, которая вызывает функцию из веб-представления

#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;  `,  }}