DEV Community

Alexandre Freire
Alexandre Freire

Posted on

React Native WebView

Veja como começar rapidamente com o React Native WebView.

Adicione react-native-webview em suas dependências 

$ yarn add react-native-webview
Enter fullscreen mode Exit fullscreen mode

(ou)

npm

$ npm install --save react-native-webview
Enter fullscreen mode Exit fullscreen mode

Link native dependencies

Para react-native 0.60 autolinking cuidará da etapa do link, mas não se esqueça de executar

pod install
Enter fullscreen mode Exit fullscreen mode

Os módulos do React Native que incluem códigos nativos de Objective-C, Swift, Java ou Kotlin precisam ser “vinculados” para que o compilador saiba incluí-los no aplicativo.

$ react-native link react-native-webview
Enter fullscreen mode Exit fullscreen mode

iOS:

Se estiver usando cocoapods no diretório ios/ execute

pod install
Enter fullscreen mode Exit fullscreen mode

Android – react-native-webview version <6: Este módulo não requer nenhuma etapa extra após executar o comando link 🎉

Android – react-native-webview version >=6.X.X: Verifique se o AndroidX está ativado no seu projeto editando android/gradle.properties e adicionando 2 linhas:

android.useAndroidX=true
android.enableJetifier=true
Enter fullscreen mode Exit fullscreen mode

Para instalação manual do Android, consulte este artigo, onde você pode encontrar etapas detalhadas sobre como vincular qualquer projeto nativo de reação.
Para iOS, embora você possa vincular manualmente a maneira antiga usando o tutorial próprio react, achamos mais fácil usar cocoapods. Se você deseja usar cocoapods e ainda não o configurou, consulte esse artigo.
NOTA: Se você precisar desinstalar o React Native WebView, execute

react-native unlink react-native-webview
Enter fullscreen mode Exit fullscreen mode

to unlink it.

Importe a visualização da web para seu componente 

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{ uri: 'https://infinite.red' }}
        style={{ marginTop: 20 }}
      />
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Exemplo mínimo com HTML embutido:

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>Hello world</h1>' }}
      />
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)