Как я могу отправить данные в веб-просмотр, нажав на кнопку реагировать родной - PullRequest
Новая
       2

Как я могу отправить данные в веб-просмотр, нажав на кнопку реагировать родной

0 голосов
/ 19 апреля 2019

Я использовал метод componentDidMount, который правильно отправляет данные в веб-просмотр, но я хочу отправить веб-просмотр данных, когда нажимаю на определенную собственную кнопку реакции.

В этом веб-представлении отображается локальная html-страница, и в этом я отправляю данные в веб-просмотр и при загрузке события на html-странице извещаем, что данные, которые были отправлены по реакции native в этом методе componentdidmount, успешно отправляют данные на html-страницу webview но когда я пытаюсь использовать тот же код в методе, который говорит, что this.input не определено. 

   export default class HtmlRender extends Component {

   //error:this.input is undefined
   sendData() {
         this.input.postMessage( data )
   }

// This Is working
 componentDidMount(){
         this.input.postMessage( data)
   }


 render(){
      return (
          <View style={styles.fullContainer}>
               <View style={styles.webviewBorder}  >

                  <WebView
                    ref={(input) => this.input = input}
                    source={{uri:'file:///android_asset/Page.html'}}
                   />
               </View>
           <View  >
                <Button  onPress={this.sendData}>
                   <Text>
                      Data
                   </Text>
               </Button>
            </View>
  </View  >

)}

1 Ответ

0 голосов
/ 19 апреля 2019

вы можете сделать это с помощью injectedJavaScript. просто определите ваш источник HTML-страницы в const 

const htmlData = require('./page.html');

и создайте метод, как показано ниже 

injectedToHtml() {
    const myData = {planet: 'earth', galaxy: 'milkyway'};
    let injectedData = `document.getElementById('container').value = '${myData.planet+myData.galaxy}';`;
    return injectedData;
   }

и верните свой веб-вид, например, в свой компонент 

<WebView
    source={htmlData}
    javaScriptEnabled={true}
    injectedJavaScript={injectedToHtml()}
    style={{flex: 1}}
/>

Вот и все! дайте мне знать, если у вас еще есть вопросы.

Ваш HTML-файл выглядит следующим образом .. 

<!DOCTYPE html>
<html>
    <head>
      <style>
          #container {
              width:100%;
              height:100vh;
              display: flex;
              align-items:center;
              justify-content: center;
          }
      </style>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...