mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Add with-react-native-web example (#3781)
* 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
This commit is contained in:
David Calhoun
Tim Neutkens
parent
fc3b3a4101
commit
8b1458af4f
4
examples/with-react-native-web/.babelrc
Normal file
4
examples/with-react-native-web/.babelrc
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"presets": ["next/babel"],
|
||||||
|
"plugins": ["react-native-web"]
|
||||||
|
}
|
||||||
42
examples/with-react-native-web/README.md
Normal file
42
examples/with-react-native-web/README.md
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
[](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-react-native-web)
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
### Using `create-next-app`
|
||||||
|
|
||||||
|
Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm i -g create-next-app
|
||||||
|
create-next-app --example with-react-native-web
|
||||||
|
```
|
||||||
|
|
||||||
|
### Download manually
|
||||||
|
|
||||||
|
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-emotion
|
||||||
|
cd with-react-native-web
|
||||||
|
```
|
||||||
|
|
||||||
|
Install it and run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
|
||||||
|
|
||||||
|
```bash
|
||||||
|
now
|
||||||
|
```
|
||||||
|
|
||||||
|
## The idea behind the example
|
||||||
|
|
||||||
|
This example features how to use [react-native-web](https://github.com/necolas/react-native-web) to bring the platform-agnostic Components and APIs of React Native to the web.
|
||||||
|
|
||||||
|
> **High-quality user interfaces**: React Native for Web makes it easy to create fast, adaptive web UIs in JavaScript. It provides native-like interactions, support for multiple input modes (touch, mouse, keyboard), optimized vendor-prefixed styles, built-in support for RTL layout, built-in accessibility, and integrates with React Dev Tools.
|
||||||
|
>
|
||||||
|
> **Write once, render anywhere**: React Native for Web interoperates with existing React DOM components and is compatible with the majority of the React Native API. You can develop new components for native and web without rewriting existing code. React Native for Web can also render to HTML and critical CSS on the server using Node.js.
|
||||||
17
examples/with-react-native-web/package.json
Normal file
17
examples/with-react-native-web/package.json
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
"name": "with-react-native-web",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
45
examples/with-react-native-web/pages/_document.js
Normal file
45
examples/with-react-native-web/pages/_document.js
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
20
examples/with-react-native-web/pages/index.js
Normal file
20
examples/with-react-native-web/pages/index.js
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { StyleSheet, Text, View } from 'react-native'
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
alignItems: 'center',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center'
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
alignItems: 'center',
|
||||||
|
fontSize: 24
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default props => (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<Text style={styles.text}>Welcome to Next.js!</Text>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
Loading…
Reference in a new issue