Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tdzl2003/react-native-web-platform
React Native on web
https://github.com/tdzl2003/react-native-web-platform
react reactnative web
Last synced: 18 days ago
JSON representation
React Native on web
- Host: GitHub
- URL: https://github.com/tdzl2003/react-native-web-platform
- Owner: tdzl2003
- Created: 2017-08-28T12:45:36.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-19T13:44:35.000Z (almost 7 years ago)
- Last Synced: 2024-10-13T08:24:03.239Z (about 1 month ago)
- Topics: react, reactnative, web
- Language: JavaScript
- Homepage:
- Size: 151 KB
- Stars: 49
- Watchers: 3
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Real React Native on Web Platform
## Install:
First initialize your react-native project
```shell
react-native init MyProject
cd MyProject
```
Install this module.
```shell
yarn add react-native-web-platform
```
Configure your rn-cli.config.js to add web platform & provideModuleNodeModules:
```javascript
'use strict';
const config = {
// Add these lines if you already have a rn-cli.config.js
getPlatforms() {
return ['web'];
},
getProvidesModuleNodeModules() {
return [
'react-native',
'react-native-web-platform',
];
},
};
module.exports = config;
```
Add a launch.web.js and index.html in your project root:
```javascript
// launch.web.js
// Install polyfills in native thread.
require('regenerator-runtime/runtime');
require('es6-promise').polyfill();
require('isomorphic-fetch');
const { Bridge } = require('react-native-web-platform/lib/launch');
const bridge = new Bridge(
__DEV__ ?
'./index.bundle?platform=web' :
'./index.bundle.js'
);
bridge.start();
bridge.createRootView(document.body, 'YOUR_APP_NAME_HERE');
```
> Note: if your react native version <= 0.48.x, use following instead:
```javascript
// launch.web.js
const { Bridge } = require('react-native-web-platform/lib/launch');
const bridge = new Bridge(
__DEV__ ?
'./index.web.bundle?platform=web' :
'./index.bundle.js'
);
bridge.start();
bridge.createRootView(document.body, 'YOUR_APP_NAME_HERE');
```
index.html:
```html
YOUR_APP_NAME_HERE
body { margin: 0; } html, body { height: 100%; }
.pointer-events-none {
pointer-events: none;
}
.pointer-events-box-none * {
pointer-events: all;
}
.pointer-events-box-none {
pointer-events: none;
}
.pointer-events-box-only * {
pointer-events: none;
}
.pointer-events-box-only {
pointer-events: all;
}
```
index.release.html:
```html
YOUR_APP_NAME_HERE
body { margin: 0; } html, body { height: 100%; }
.pointer-events-none {
pointer-events: none;
}
.pointer-events-box-none * {
pointer-events: all;
}
.pointer-events-box-none {
pointer-events: none;
}
.pointer-events-box-only * {
pointer-events: none;
}
.pointer-events-box-only {
pointer-events: all;
}
```
If your react native version <= 0.48.x, you should also create a `index.web.js` with the content like `index.ios.js` or `index.android.js`:
## Debug
```shell
npm start
```
Then visit [http://localhost:8081/index.html](http://localhost:8081/index.html) to visit your page.
## Publish
#### version >= 0.49.x:
Linux & Mac:
```shell
mkdir build
mkdir build/web
react-native bundle --entry-file launch.web.js --platform web --dev false --bundle-output build/web/launch.bundle.js --assets-dest build/web
react-native bundle --entry-file index.js --platform web --dev false --bundle-output build/web/index.bundle.js --assets-dest build/web
cp index.release.html build/web/index.html
```
Windows:
```shell
md build
md build\web
react-native bundle --entry-file launch.web.js --platform web --dev false --bundle-output build/web/launch.bundle.js --assets-dest build/web
react-native bundle --entry-file index.js --platform web --dev false --bundle-output build/web/index.bundle.js --assets-dest build/web
copy index.release.html build\web\index.html
```
#### version <= 0.48.x
Linux & Mac:
```shell
mkdir build
mkdir build/web
react-native bundle --entry-file launch.web.js --platform web --dev false --bundle-output build/web/launch.bundle.js --assets-dest build/web
react-native bundle --entry-file index.web.js --platform web --dev false --bundle-output build/web/index.bundle.js --assets-dest build/web
cp index.release.html build/web/index.html
```
Windows:
```shell
md build
md build\web
react-native bundle --entry-file launch.web.js --platform web --dev false --bundle-output build/web/launch.bundle.js --assets-dest build/web
react-native bundle --entry-file index.web.js --platform web --dev false --bundle-output build/web/index.bundle.js --assets-dest build/web
copy index.release.html build\web\index.html
```
Then publish everything in `build/web` into your server.