mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-05-27 16:22:20 +00:00
[add] ReactDOM server API to ReactNative API
This commit is contained in:
@@ -30,7 +30,7 @@ styles defined in JavaScript into "Atomic CSS".
|
|||||||
To install in your app:
|
To install in your app:
|
||||||
|
|
||||||
```
|
```
|
||||||
npm install --save react@0.14 react-dom@0.14 react-native-web
|
npm install --save react@0.15 react-native-web
|
||||||
```
|
```
|
||||||
|
|
||||||
Read the [Client and Server rendering](docs/guides/rendering.md) guide.
|
Read the [Client and Server rendering](docs/guides/rendering.md) guide.
|
||||||
|
|||||||
@@ -21,15 +21,14 @@ module.exports = {
|
|||||||
Rendering without using the `AppRegistry`:
|
Rendering without using the `AppRegistry`:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import ReactDOM from 'react-dom'
|
import ReactNative from 'react-native'
|
||||||
import ReactDOMServer from 'react-dom/server'
|
|
||||||
|
|
||||||
// DOM render
|
// DOM render
|
||||||
ReactDOM.render(<div />, document.getElementById('react-app'))
|
ReactNative.render(<div />, document.getElementById('react-app'))
|
||||||
|
|
||||||
// Server render
|
// Server render
|
||||||
ReactDOMServer.renderToString(<div />)
|
ReactNative.renderToString(<div />)
|
||||||
ReactDOMServer.renderToStaticMarkup(<div />)
|
ReactNative.renderToStaticMarkup(<div />)
|
||||||
```
|
```
|
||||||
|
|
||||||
Rendering using the `AppRegistry`:
|
Rendering using the `AppRegistry`:
|
||||||
@@ -54,7 +53,10 @@ import { AppRegistry } from 'react-native'
|
|||||||
AppRegistry.registerComponent('App', () => App)
|
AppRegistry.registerComponent('App', () => App)
|
||||||
|
|
||||||
// mounts and runs the app within the `rootTag` DOM node
|
// mounts and runs the app within the `rootTag` DOM node
|
||||||
AppRegistry.runApplication('App', { initialProps, rootTag: document.getElementById('react-app') })
|
AppRegistry.runApplication('App', {
|
||||||
|
initialProps: {},
|
||||||
|
rootTag: document.getElementById('react-app')
|
||||||
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
React Native for Web extends `AppRegistry` to provide support for server-side
|
React Native for Web extends `AppRegistry` to provide support for server-side
|
||||||
@@ -85,7 +87,7 @@ export default AppShell
|
|||||||
|
|
||||||
import App from './App'
|
import App from './App'
|
||||||
import AppShell from './AppShell'
|
import AppShell from './AppShell'
|
||||||
import { AppRegistry } from 'react-native'
|
import ReactNative, { AppRegistry } from 'react-native'
|
||||||
|
|
||||||
// registers the app
|
// registers the app
|
||||||
AppRegistry.registerComponent('App', () => App)
|
AppRegistry.registerComponent('App', () => App)
|
||||||
@@ -94,5 +96,5 @@ AppRegistry.registerComponent('App', () => App)
|
|||||||
const { html, style, styleElement } = AppRegistry.prerenderApplication('App', { initialProps })
|
const { html, style, styleElement } = AppRegistry.prerenderApplication('App', { initialProps })
|
||||||
|
|
||||||
// renders the full-page markup
|
// renders the full-page markup
|
||||||
const renderedApplicationHTML = React.renderToStaticMarkup(<AppShell html={html} styleElement={styleElement} />)
|
const renderedApplicationHTML = ReactNative.renderToStaticMarkup(<AppShell html={html} styleElement={styleElement} />)
|
||||||
```
|
```
|
||||||
|
|||||||
+2
-3
@@ -21,6 +21,7 @@
|
|||||||
"fbjs": "^0.8.1",
|
"fbjs": "^0.8.1",
|
||||||
"inline-style-prefix-all": "^2.0.2",
|
"inline-style-prefix-all": "^2.0.2",
|
||||||
"lodash": "^4.13.1",
|
"lodash": "^4.13.1",
|
||||||
|
"react-dom": "^15.1.0",
|
||||||
"react-textarea-autosize": "^4.0.2",
|
"react-textarea-autosize": "^4.0.2",
|
||||||
"react-timer-mixin": "^0.13.3"
|
"react-timer-mixin": "^0.13.3"
|
||||||
},
|
},
|
||||||
@@ -53,13 +54,11 @@
|
|||||||
"node-libs-browser": "^0.5.3",
|
"node-libs-browser": "^0.5.3",
|
||||||
"react": "^15.1.0",
|
"react": "^15.1.0",
|
||||||
"react-addons-test-utils": "^15.1.0",
|
"react-addons-test-utils": "^15.1.0",
|
||||||
"react-dom": "^15.1.0",
|
|
||||||
"webpack": "^1.13.1",
|
"webpack": "^1.13.1",
|
||||||
"webpack-dev-server": "^1.14.1"
|
"webpack-dev-server": "^1.14.1"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "^15.1.0",
|
"react": "^15.1.0"
|
||||||
"react-dom": "^15.1.0"
|
|
||||||
},
|
},
|
||||||
"author": "Nicolas Gallagher",
|
"author": "Nicolas Gallagher",
|
||||||
"license": "BSD-3-Clause",
|
"license": "BSD-3-Clause",
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import './apis/PanResponder/injectResponderEventPlugin'
|
|||||||
|
|
||||||
import findNodeHandle from './modules/findNodeHandle'
|
import findNodeHandle from './modules/findNodeHandle'
|
||||||
import ReactDOM from 'react-dom'
|
import ReactDOM from 'react-dom'
|
||||||
|
import ReactDOMServer from 'react-dom/server'
|
||||||
|
|
||||||
// apis
|
// apis
|
||||||
import Animated from 'animated'
|
import Animated from 'animated'
|
||||||
@@ -45,9 +46,13 @@ import PointPropType from './apis/StyleSheet/PointPropType'
|
|||||||
Animated.inject.FlattenStyle(StyleSheet.flatten)
|
Animated.inject.FlattenStyle(StyleSheet.flatten)
|
||||||
|
|
||||||
const ReactNative = {
|
const ReactNative = {
|
||||||
|
// top-level API
|
||||||
findNodeHandle,
|
findNodeHandle,
|
||||||
render: ReactDOM.render,
|
render: ReactDOM.render,
|
||||||
unmountComponentAtNode: ReactDOM.unmountComponentAtNode,
|
unmountComponentAtNode: ReactDOM.unmountComponentAtNode,
|
||||||
|
// web-only
|
||||||
|
renderToStaticMarkup: ReactDOMServer.renderToStaticMarkup,
|
||||||
|
renderToString: ReactDOMServer.renderToString,
|
||||||
|
|
||||||
// apis
|
// apis
|
||||||
Animated: {
|
Animated: {
|
||||||
|
|||||||
Reference in New Issue
Block a user