First initialize your react-native project
react-native init MyProject
cd MyProjectInstall this module.
yarn add react-native-web-platformConfigure your rn-cli.config.js to add web platform & provideModuleNodeModules:
'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:
// 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:
// 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>
<head>
<title>YOUR_APP_NAME_HERE</title>
<style>
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;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<script src="./launch.web.bundle?platform=web"></script>
</body>
</html>index.release.html:
<html>
<head>
<title>YOUR_APP_NAME_HERE</title>
<style>
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;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<script src="./launch.bundle.js"></script>
</body>
</html>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:
npm startThen visit http://localhost:8081/index.html to visit your page.
Linux & Mac:
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.htmlWindows:
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.htmlLinux & Mac:
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.htmlWindows:
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.htmlThen publish everything in build/web into your server.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent