mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-03-29 09:08:32 +08:00
120 lines
2.3 KiB
Markdown
120 lines
2.3 KiB
Markdown
# React Native
|
|
|
|
Use a module loader that supports package aliases (e.g., webpack), and alias
|
|
`react-native` to `react-native-web`.
|
|
|
|
```js
|
|
// webpack.config.js
|
|
|
|
module.exports = {
|
|
// ...
|
|
resolve: {
|
|
alias: {
|
|
'react-native': 'react-native-web'
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Image assets
|
|
|
|
In order to require image assets (e.g. `require('assets/myimage.png')`), add
|
|
the `url-loader` to the webpack config:
|
|
|
|
```js
|
|
// webpack.config.js
|
|
|
|
module.exports = {
|
|
// ...
|
|
module: {
|
|
loaders: [
|
|
{
|
|
test: /\.(gif|jpe?g|png|svg)$/,
|
|
loader: 'url-loader',
|
|
query: { name: '[name].[hash:16].[ext]' }
|
|
}
|
|
]
|
|
}
|
|
};
|
|
```
|
|
|
|
## Dependencies
|
|
|
|
Many OSS React Native packages are not compiled to ES5 before being published.
|
|
This can result in webpack build errors. To avoid this issue you should
|
|
configure webpack (or your bundler of choice) to run
|
|
`babel-preset-react-native` over the necessary `node_module`. For example:
|
|
|
|
```js
|
|
// webpack.config.js
|
|
|
|
module.exports = {
|
|
// ...
|
|
module: {
|
|
loaders: [
|
|
{
|
|
// transpile to ES5
|
|
test: /\.jsx?$/,
|
|
include: [
|
|
path.resolve(__dirname, 'src'),
|
|
path.resolve(__dirname, 'node_modules/react-native-something')
|
|
],
|
|
loader: 'babel-loader',
|
|
query: { cacheDirectory: true }
|
|
}
|
|
]
|
|
}
|
|
};
|
|
```
|
|
|
|
Please refer to the webpack documentation for more information.
|
|
|
|
## Web-specific code
|
|
|
|
Minor platform differences can use the `Platform` module.
|
|
|
|
```js
|
|
import { AppRegistry, Platform } from 'react-native'
|
|
|
|
AppRegistry.registerComponent('MyApp', () => MyApp)
|
|
|
|
if (Platform.OS === 'web') {
|
|
AppRegistry.runApplication('MyApp', {
|
|
rootTag: document.getElementById('react-root')
|
|
});
|
|
}
|
|
```
|
|
|
|
More substantial Web-specific implementation code should be written in files
|
|
with the extension `.web.js`. Webpack@1 will automatically resolve these files.
|
|
Webpack@2 requires additional configuration.
|
|
|
|
```js
|
|
// webpack.config.js
|
|
|
|
module.exports = {
|
|
// ...
|
|
resolve: {
|
|
extensions: [ '.web.js', '.js' ]
|
|
}
|
|
};
|
|
```
|
|
|
|
## Optimizations
|
|
|
|
Production builds can benefit from dead-code elimination by defining the
|
|
following variables:
|
|
|
|
```js
|
|
// webpack.config.js
|
|
|
|
module.exports = {
|
|
// ...
|
|
plugins: [
|
|
new webpack.DefinePlugin({
|
|
'process.env.NODE_ENV': JSON.stringify('production')
|
|
})
|
|
}
|
|
}
|
|
```
|