mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 22:51:09 +08:00
[add] export a 'core' module
This commit is contained in:
22
README.md
22
README.md
@@ -2,7 +2,6 @@
|
||||
|
||||
[![Build Status][travis-image]][travis-url]
|
||||
[![npm version][npm-image]][npm-url]
|
||||

|
||||
|
||||
[React Native][react-native-url] components and APIs for the Web.
|
||||
|
||||
@@ -13,17 +12,18 @@ Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
|
||||
"React Native for Web" is a project to bring React Native's building blocks and
|
||||
touch handling to the Web.
|
||||
|
||||
React Native provides a foundational layer to support interoperable,
|
||||
zero-configuration React component development. This is missing from React's
|
||||
web ecosystem where OSS components rely on inline styles (usually without
|
||||
vendor prefixes), or require build tool configuration. This project allows
|
||||
components built upon React Native to be run on the Web, and it manages all
|
||||
component styling out-of-the-box.
|
||||
React Native – unlike React DOM – is a comprehensive UI framework for
|
||||
application developers. React Native's components are higher-level building
|
||||
blocks than those provided by React DOM. React Native also provides
|
||||
platform-agnostic JavaScript APIs for animating and styling components,
|
||||
responding to touch events, and interacting with the host environment.
|
||||
|
||||
For example, the [`View`](docs/components/View.md) component makes it easy to build
|
||||
cross-browser layouts with flexbox, such as stacked and nested boxes with
|
||||
margin and padding. And the [`StyleSheet`](docs/guides/style.md) API converts
|
||||
styles defined in JavaScript into "Atomic CSS".
|
||||
Bringing the React Native APIs and components to the Web allows React Native
|
||||
components to be run on the Web platform. But it also solves several problems
|
||||
facing the React DOM ecosystem: no framework-level animation or styling
|
||||
solution; difficulty sharing and composing UI components (without pulling in
|
||||
their build or runtime dependencies); and the lack of high-level base
|
||||
components.
|
||||
|
||||
## Quick start
|
||||
|
||||
|
||||
@@ -16,6 +16,22 @@ module.exports = {
|
||||
}
|
||||
```
|
||||
|
||||
The `react-native-web` package also includes a `core` module that exports only
|
||||
`ReactNative`, `Image`, `StyleSheet`, `Text`, `TextInput`, and `View`.
|
||||
|
||||
```js
|
||||
// webpack.config.js
|
||||
|
||||
module.exports = {
|
||||
// ...other configuration
|
||||
resolve: {
|
||||
alias: {
|
||||
'react-native': 'react-native-web/core'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Client-side rendering
|
||||
|
||||
Rendering without using the `AppRegistry`:
|
||||
|
||||
25
src/core.js
Normal file
25
src/core.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import './modules/injectResponderEventPlugin'
|
||||
|
||||
import findNodeHandle from './modules/findNodeHandle'
|
||||
import ReactDOM from 'react-dom'
|
||||
import ReactDOMServer from 'react-dom/server'
|
||||
import StyleSheet from './apis/StyleSheet'
|
||||
import Image from './components/Image'
|
||||
import Text from './components/Text'
|
||||
import TextInput from './components/TextInput'
|
||||
import View from './components/View'
|
||||
|
||||
const ReactNativeCore = {
|
||||
findNodeHandle,
|
||||
render: ReactDOM.render,
|
||||
renderToStaticMarkup: ReactDOMServer.renderToStaticMarkup,
|
||||
renderToString: ReactDOMServer.renderToString,
|
||||
unmountComponentAtNode: ReactDOM.unmountComponentAtNode,
|
||||
StyleSheet,
|
||||
Image,
|
||||
Text,
|
||||
TextInput,
|
||||
View
|
||||
}
|
||||
|
||||
module.exports = ReactNativeCore
|
||||
Reference in New Issue
Block a user