terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

[change] Update RNW example (#4787)

Browse source
This commit is contained in:
David Calhoun 2018-07-15 13:59:20 -05:00 committed by Tim Neutkens
parent 0f87368da2
commit 6f4925c193
4 changed files with 14 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/with-react-native-web/.babelrc
View file

@ -1,4 +1,6 @@
{
"presets": ["next/babel"],
"plugins": ["react-native-web"]
"plugins": [
["react-native-web", { commonjs: true }]
]
}

11
examples/with-react-native-web/package.json
View file

@ -6,12 +6,11 @@
"start": "next start"
},
"dependencies": {
"babel-plugin-react-native-web": "^0.8.8",
"next": "latest",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-native-web": "^0.4.0"
},
"devDependencies": {
"babel-plugin-react-native-web": "^0.4.0"
"react": "^16.4.1",
"react-art": "^16.4.1",
"react-dom": "^16.4.1",
"react-native-web": "^0.8.8"
}
}

18
examples/with-react-native-web/pages/_document.js
View file

@ -2,13 +2,8 @@ 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.
// Force Next-generated DOM elements to fill their parent's height
const normalizeNextElements = `
body > div:first-child,
#__next {
display: flex;
flex-direction: column;
@ -22,23 +17,20 @@ export default class MyDocument extends Document {
const { getStyleElement } = AppRegistry.getApplication('Main')
const page = renderPage()
const styles = [
<style
key={index++}
dangerouslySetInnerHTML={{ __html: normalizeNextElements }}
/>,
<style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />,
getStyleElement()
]
return { ...page, styles }
return { ...page, styles: React.Children.toArray(styles) }
}
render () {
return (
<html style={{ height: '100%', width: '100%' }}>
<html style={{ height: '100%' }}>
<Head>
<title>react-native-web</title>
<meta name='viewport' content='width=device-width, initial-scale=1' />
</Head>
<body style={{ height: '100%', width: '100%', overflowY: 'scroll' }}>
<body style={{ height: '100%', overflow: 'hidden' }}>
<Main />
<NextScript />
</body>

2
examples/with-react-native-web/pages/index.js
View file

@ -3,8 +3,8 @@ import { StyleSheet, Text, View } from 'react-native'
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
flexGrow: 1,
justifyContent: 'center'
},
text: {