mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
8b1458af4f
* Add with-react-native-web example Showcase the required work to use [react-native-web](https://github.com/necolas/react-native-web) with Next.js. * Repair lint warnings
46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
import Document, { Head, Main, NextScript } from 'next/document'
|
|
import React from 'react'
|
|
import { AppRegistry } from 'react-native-web'
|
|
|
|
let index = 0
|
|
|
|
// Force Next-generated DOM elements to fill their parent's height.
|
|
// Not required for using of react-native-web, but helps normalize
|
|
// layout for top-level wrapping elements.
|
|
const normalizeNextElements = `
|
|
body > div:first-child,
|
|
#__next {
|
|
height: 100%;
|
|
}
|
|
`
|
|
|
|
export default class MyDocument extends Document {
|
|
static async getInitialProps ({ renderPage }) {
|
|
AppRegistry.registerComponent('Main', () => Main)
|
|
const { getStyleElement } = AppRegistry.getApplication('Main')
|
|
const page = renderPage()
|
|
const styles = [
|
|
<style
|
|
key={index++}
|
|
dangerouslySetInnerHTML={{ __html: normalizeNextElements }}
|
|
/>,
|
|
getStyleElement()
|
|
]
|
|
return { ...page, styles }
|
|
}
|
|
|
|
render () {
|
|
return (
|
|
<html style={{ height: '100%', width: '100%' }}>
|
|
<Head>
|
|
<title>react-native-web</title>
|
|
</Head>
|
|
<body style={{ height: '100%', width: '100%', overflowY: 'scroll' }}>
|
|
<Main />
|
|
<NextScript />
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|
|
}
|