Skip to content

Latest commit

 

History

History
130 lines (87 loc) · 4.19 KB

Getting-Started.portuguese.md

File metadata and controls

130 lines (87 loc) · 4.19 KB
Raw

Guia de introdução ao React Native WebView

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

1. Adicione react-native-webview às suas dependências

$ yarn add react-native-webview

(ou)

Para caso use o npm

$ npm install --save react-native-webview

2. Vincular dependências nativas

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

Os módulos React Native que incluem código nativo Objective-C, Swift, Java ou Kotlin precisam ser "vinculados" para que o compilador saiba incluí-los no aplicativo.

$ react-native link react-native-webview

NOTA: Se você precisar desinstalar o React Native WebView, execute react-native unlink react-native-webview para desvinculá-lo.

iOS & macOS:

Se estiver usando CocoaPods, no diretório ios/ ou macos/ execute:

$ pod install

Embora você possa vincular manualmente da maneira antiga usando tutorial do react-native, achamos mais fácil usar o CocoaPods. Se você deseja usar o CocoaPods e ainda não o configurou, consulte esse artigo.

Android:

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

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

android.useAndroidX=true
android.enableJetifier=true

Para instalação manual no Android, consulte este artigo, onde você pode encontrar as etapas detalhadas sobre como vincular qualquer projeto react-native.

Windows:

A vinculação automática ainda não é compatível com ReactNativeWindows. Faça as seguintes adições aos arquivos fornecidos manualmente:

windows/myapp.sln

Adicione ao projeto ReactNativeWebView e WebViewBridgeComponent à sua solução.

  1. Abra a solução no Visual Studio 2019
  2. Clique com o botão direito do mouse no ícone Soluções > Gerenciador de Soluções > Adicionar > Projeto Existente Selecione node_modules\react-native-webview\windows\ReactNativeWebView\ReactNativeWebView.vcxproj Selecione node_modules\react-native-webview\windows\WebViewBridgeComponent\WebViewBridgeComponent.vcxproj

windows/myapp/myapp.vcxproj

Adicione uma referência a ReactNativeWebView ao seu projeto de aplicativo principal. Do Visual Studio 2019:

  1. Clique com o botão direito do mouse no projeto do aplicativo principal > Adicionar > Referências... Verifique se ReactNativeWebView em soluções de Projeto.

  2. Modifique os arquivos abaixo para adicionar os provedores de pacotes ao seu projeto de aplicativo principal

pch.h

Adicione #include "winrt/ReactNativeWebView.h".

app.cpp

Adicione PackageProviders().Append(winrt::ReactNativeWebView::ReactPackageProvider()); antes de InitializeComponent();.

Observe que se você deseja habilitar a rolagem com o Touch para o componente WebView, você deve desabilitar a perspectiva do seu aplicativo usando ReactRootView.IsPerspectiveEnabled.

3. 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 }}
      />
    );
  }
}

Exemplo mínimo com HTML:

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>' }}
      />
    );
  }
}

Em seguida, confira o Referência da API ou o Guia detalhado.

Traduções

Esse arquivo está disponível em: