mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-05-28 08:34:31 +00:00
Update documentation
This commit is contained in:
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
[![Build Status][travis-image]][travis-url]
|
[![Build Status][travis-image]][travis-url]
|
||||||
[![npm version][npm-image]][npm-url]
|
[![npm version][npm-image]][npm-url]
|
||||||

|

|
||||||
|
|
||||||
[React Native][react-native-url] components and APIs for the Web.
|
[React Native][react-native-url] components and APIs for the Web.
|
||||||
|
|
||||||
|
|||||||
@@ -12,17 +12,10 @@ cases it will be necessary to use a Web counterpart.
|
|||||||
## Missing component props
|
## Missing component props
|
||||||
|
|
||||||
There are properties that do not work across all platforms. All web-specific
|
There are properties that do not work across all platforms. All web-specific
|
||||||
props are annotated with `(web)` in the documentaiton.
|
props are annotated with `(web)` in the documentation.
|
||||||
|
|
||||||
## Platform parity
|
## Platform parity
|
||||||
|
|
||||||
There are some known issues in React Native where APIs could be made more
|
There are some known issues in React Native where APIs could be made more
|
||||||
consistent between platforms. For example, React Native for Web includes
|
consistent between platforms. For example, React Native for Web includes
|
||||||
`ActivityIndicator` and a horizontal `ProgressBar`.
|
`ActivityIndicator` and a horizontal `ProgressBar`.
|
||||||
|
|
||||||
Other parts of React Native, such as the `Animated` and `PanResponder` APIs,
|
|
||||||
are highly complex and have not yet been ported to React Native for Web. Given
|
|
||||||
the difficulties keeping these APIs in sync with React Native, we'd prefer the
|
|
||||||
APIs to be published as separate npm packages. If not, we will consider a web
|
|
||||||
implementation, possibly using the [Web Animations
|
|
||||||
API/polyfill](https://github.com/web-animations/web-animations-js)
|
|
||||||
|
|||||||
@@ -1,8 +1,5 @@
|
|||||||
# React Native
|
# React Native
|
||||||
|
|
||||||
This is an experimental feature to support: using community-developed React
|
|
||||||
Native components on the Web; and rendering React Native apps to Web.
|
|
||||||
|
|
||||||
Use a module loader that supports package aliases (e.g., webpack), and alias
|
Use a module loader that supports package aliases (e.g., webpack), and alias
|
||||||
`react-native` to `react-native-web`.
|
`react-native` to `react-native-web`.
|
||||||
|
|
||||||
@@ -10,6 +7,7 @@ Use a module loader that supports package aliases (e.g., webpack), and alias
|
|||||||
// webpack.config.js
|
// webpack.config.js
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
// ...
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'react-native': 'react-native-web'
|
'react-native': 'react-native-web'
|
||||||
@@ -18,8 +16,7 @@ module.exports = {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
Web-specific implementations can use the `*.web.js` naming pattern, which
|
## Web-specific code
|
||||||
webpack will resolve.
|
|
||||||
|
|
||||||
Minor platform differences can use the `Platform` module.
|
Minor platform differences can use the `Platform` module.
|
||||||
|
|
||||||
@@ -38,3 +35,25 @@ if (Platform.OS === 'web') {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
More substantial Web-specific implementation code should be written in files
|
||||||
|
with the extension `.web.js`, which webpack will automatically resolve.
|
||||||
|
|
||||||
|
## Optimizations
|
||||||
|
|
||||||
|
Production builds can benefit from dead-code elimination by defining the
|
||||||
|
following variables:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// webpack.config.js
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
// ...
|
||||||
|
plugins: [
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
'Platform.OS': 'web',
|
||||||
|
'process.env.NODE_ENV': JSON.stringify('production')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user