mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-08-15 18:45:06 +00:00
[fix] Server-side rendering
`AppRegistry.prerenderApplication` now returns a style element for use in app shells. Guard use of `window` in APIs and Event plugin. Fix #107 Fix #108
This commit is contained in:
@@ -16,8 +16,11 @@ into `runApplication`. These should always be used as a pair.
|
||||
(web) static **prerenderApplication**(appKey:string, appParameters: object)
|
||||
|
||||
Renders the given application to an HTML string. Use this for server-side
|
||||
rendering. Return object is of type `{ html: string; style: string; }`, where
|
||||
`html` the prerendered HTML, and `style` is the prerendered style sheet.
|
||||
rendering. Return object is of type `{ html: string; style: string;
|
||||
styleElement: ReactComponent }`. `html` is the prerendered HTML, `style` is the
|
||||
prerendered style sheet, and `styleElement` is a React Component. It's
|
||||
recommended that you use `styleElement` to render the style sheet in an app
|
||||
shell.
|
||||
|
||||
static **registerConfig**(config: Array<AppConfig>)
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@ React.renderToStaticMarkup(<div />)
|
||||
|
||||
Rendering using the `AppRegistry`:
|
||||
|
||||
```
|
||||
```js
|
||||
// App.js
|
||||
|
||||
import React, { AppRegistry } from 'react-native'
|
||||
@@ -64,12 +64,12 @@ rendering.
|
||||
|
||||
import React from 'react-native'
|
||||
|
||||
const AppShell = (html, style) => (
|
||||
const AppShell = (html, styleElement) => (
|
||||
<html>
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta content="initial-scale=1,width=device-width" name="viewport" />
|
||||
{style}
|
||||
{styleElement}
|
||||
</head>
|
||||
<body>
|
||||
<div id="react-app" dangerouslySetInnerHTML={{ __html: html }} />
|
||||
@@ -90,8 +90,8 @@ import AppShell from './AppShell'
|
||||
AppRegistry.registerComponent('App', () => App)
|
||||
|
||||
// prerenders the app
|
||||
const { html, style } = AppRegistry.prerenderApplication('App', { initialProps })
|
||||
const { html, style, styleElement } = AppRegistry.prerenderApplication('App', { initialProps })
|
||||
|
||||
// renders the full-page markup
|
||||
const renderedApplicationHTML = React.renderToString(<AppShell html={html} style={style} />)
|
||||
const renderedApplicationHTML = React.renderToStaticMarkup(<AppShell html={html} styleElement={styleElement} />)
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user