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"], "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" "start": "next start"
}, },
"dependencies": { "dependencies": {
"babel-plugin-react-native-web": "^0.8.8",
"next": "latest", "next": "latest",
"react": "^16.0.0", "react": "^16.4.1",
"react-dom": "^16.0.0", "react-art": "^16.4.1",
"react-native-web": "^0.4.0" "react-dom": "^16.4.1",
}, "react-native-web": "^0.8.8"
"devDependencies": {
"babel-plugin-react-native-web": "^0.4.0"
} }
} }

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