chore(docs): Add API Examples in reference documentation (#329)
* Add reference examples for: - onError - onNavigationStateChange - originWhiteList - renderError - renderLoading - onShouldStartLoadWithRequest * Update to use jsx as code Add properties of objects passed into methods * Add examples for: - onLoad - onLoadEnd - onLoadStart - onLoadProgress - style * Add object descriptions, fix style issues, and remove onShouldStartLoad example Object Descriptions for: - onLoad - onLoadEnd - onLoadStart - onLoadProgress * Update Reference.md
This commit is contained in:
Malcolm Scruggs
Thibault Malbranche
parent
d28071cf52
commit
34b98de0bd
|
|
@ -147,6 +147,35 @@ Function that is invoked when the `WebView` load fails.
|
|||
| -------- | -------- |
|
||||
| function | No |
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
onError={(syntheticEvent) => {
|
||||
const { nativeEvent } = syntheticEvent
|
||||
console.warn('WebView error: ', nativeEvent)
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
Function passed to `onError` is called with a SyntheticEvent wrapping a nativeEvent with these properties:
|
||||
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
code
|
||||
description
|
||||
didFailProvisionalNavigation
|
||||
domain
|
||||
loading
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
> **_Note_**
|
||||
> Domain is only used on iOS
|
||||
|
||||
---
|
||||
|
||||
### `onLoad`
|
||||
|
|
@ -157,6 +186,29 @@ Function that is invoked when the `WebView` has finished loading.
|
|||
| -------- | -------- |
|
||||
| function | No |
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{uri: 'https://facebook.github.io/react-native'}}
|
||||
onLoad={(syntheticEvent) => {
|
||||
const { nativeEvent } = syntheticEvent;
|
||||
this.url = nativeEvent.url;
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
Function passed to `onLoad` is called with a SyntheticEvent wrapping a nativeEvent with these properties:
|
||||
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
loading
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `onLoadEnd`
|
||||
|
|
@ -167,6 +219,31 @@ Function that is invoked when the `WebView` load succeeds or fails.
|
|||
| -------- | -------- |
|
||||
| function | No |
|
||||
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{uri: 'https://facebook.github.io/react-native'}}
|
||||
onLoadEnd={(syntheticEvent) => {
|
||||
// update component to be aware of loading status
|
||||
const { nativeEvent } = syntheticEvent;
|
||||
this.isLoading = nativeEvent.loading;
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
Function passed to `onLoadEnd` is called with a SyntheticEvent wrapping a nativeEvent with these properties:
|
||||
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
loading
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `onLoadStart`
|
||||
|
|
@ -177,6 +254,31 @@ Function that is invoked when the `WebView` starts loading.
|
|||
| -------- | -------- |
|
||||
| function | No |
|
||||
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{uri: 'https://facebook.github.io/react-native/='}}
|
||||
onLoadStart={(syntheticEvent) => {
|
||||
// update component to be aware of loading status
|
||||
const { nativeEvent } = syntheticEvent;
|
||||
this.isLoading = nativeEvent.loading;
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
Function passed to `onLoadStart` is called with a SyntheticEvent wrapping a nativeEvent with these properties:
|
||||
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
loading
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `onLoadProgress`
|
||||
|
|
@ -192,6 +294,29 @@ Function that is invoked when the `WebView` is loading.
|
|||
| -------- | -------- |
|
||||
| function | No |
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
onLoadProgress={({ nativeEvent }) => {
|
||||
this.loadingProgress = nativeEvent.progress
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
Function passed to `onLoadProgress` is called with a SyntheticEvent wrapping a nativeEvent with these properties:
|
||||
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
loading
|
||||
progress
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `onMessage`
|
||||
|
|
@ -214,6 +339,29 @@ Function that is invoked when the `WebView` loading starts or ends.
|
|||
| -------- | -------- |
|
||||
| function | No |
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
onNavigationStateChange={(navState) => {
|
||||
// Keep track of going back navigation within component
|
||||
this.canGoBack = navState.canGoBack;
|
||||
}} />
|
||||
```
|
||||
|
||||
The `navState` object includes these properties:
|
||||
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
loading
|
||||
navigationType
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `originWhitelist`
|
||||
|
|
@ -224,6 +372,16 @@ List of origin strings to allow being navigated to. The strings allow wildcards
|
|||
| ---------------- | -------- |
|
||||
| array of strings | No |
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
//only allow URIs that begin with https:// or git://
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
originWhitelist={['https://*', 'git://*']}
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `renderError`
|
||||
|
|
@ -234,6 +392,18 @@ Function that returns a view to show if there's an error.
|
|||
| -------- | -------- |
|
||||
| function | No |
|
||||
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
renderError={(errorName) => <Error name={errorName} /> }
|
||||
/>
|
||||
```
|
||||
|
||||
The function passed to `renderError` will be called with the name of the error
|
||||
|
||||
---
|
||||
|
||||
### `renderLoading`
|
||||
|
|
@ -244,6 +414,17 @@ Function that returns a loading indicator. The startInLoadingState prop must be
|
|||
| -------- | -------- |
|
||||
| function | No |
|
||||
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
startInLoadingState={true}
|
||||
renderLoading={() => <Loading /> }
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `scalesPageToFit`
|
||||
|
|
@ -293,6 +474,31 @@ lockIdentifier
|
|||
navigationType
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
onShouldStartLoadWithRequest={(request) => {
|
||||
// Only allow navigating within this website
|
||||
return request.url.startsWith("https://facebook.github.io/react-native")
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
The `request` object includes these properties:
|
||||
|
||||
```
|
||||
title
|
||||
url
|
||||
loading
|
||||
target
|
||||
canGoBack
|
||||
canGoForward
|
||||
lockIdentifier
|
||||
navigationType
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `startInLoadingState`
|
||||
|
|
@ -313,6 +519,15 @@ A style object that allow you to customize the `WebView` style. Please note that
|
|||
| ----- | -------- |
|
||||
| style | No |
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
style={{marginTop: 20}}
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `decelerationRate`
|
||||
|
|
|
|||
Loading…
Reference in New Issue