mirror of
https://github.com/status-im/react-native-webview.git
synced 2025-02-22 08:48:39 +00:00
Docs updates
This commit is contained in:
parent
f54a37f9d9
commit
935e9518ee
@ -1,5 +1,52 @@
|
||||
# React Native WebView Guide
|
||||
|
||||
This document walks you through the most common use cases for React Native WebView. It doesn't cover [the full API](Reference.md), but after reading it you should have a good sense for how the WebView works and common patterns for using the WebView.
|
||||
This document walks you through the most common use cases for React Native WebView. It doesn't cover [the full API](Reference.md), but after reading it and looking at the sample code snippets you should have a good sense for how the WebView works and common patterns for using the WebView.
|
||||
|
||||
_This guide is currently a work in progress._
|
||||
|
||||
## Guide Index
|
||||
|
||||
- [Basic Inline HTML](Guide.md#basic-inline-html)
|
||||
- [Basic URL Source](Guide.md#basic-url-source)
|
||||
|
||||
### Basic inline HTML
|
||||
|
||||
The simplest way to use the WebView is to simply pipe in the HTML you want to display. Note that setting an `html` source requires the [originWhiteList](Reference.md#originWhiteList) property to be set to `['*']`.
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react';
|
||||
import { WebView } from 'react-native-webview';
|
||||
|
||||
class MyInlineWeb extends Component {
|
||||
render() {
|
||||
return (
|
||||
<WebView
|
||||
originWhitelist={['*']}
|
||||
source={{ html: '<h1>This is a static HTML source!</h1>' }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Passing a new static html source will cause the WebView to rerender.
|
||||
|
||||
### Basic URL Source
|
||||
|
||||
This is the most common use-case for WebView.
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react';
|
||||
import { WebView } from 'react-native-webview';
|
||||
|
||||
class MyWeb extends Component {
|
||||
render() {
|
||||
return (
|
||||
<WebView
|
||||
source={{uri: 'https://infinite.red/react-native'}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
_Coming soon!_
|
||||
|
@ -71,6 +71,8 @@ The object passed to `source` can have either of the following shapes:
|
||||
|
||||
**Static HTML**
|
||||
|
||||
_Note that using static HTML requires the WebView property [originWhiteList](Reference.md#originWhiteList) to `['*']`._
|
||||
|
||||
* `html` (string) - A static HTML page to display in the WebView.
|
||||
* `baseUrl` (string) - The base URL to be used for any relative links in the HTML.
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user