使用react-native项目集成

安装

yarn add react-dom react-native-web

html入口

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,viewport-fit=cover">
    <title>rn_web</title>
    <style>
        /* These styles make the body full-height */
        html, body { height: 100%; }
        /* These styles disable body scrolling if you are using <ScrollView> */
        body { overflow: hidden; }
        /* These styles make the root element full-height */
        #react-root { display:flex; height:100%; }
    </style>
</head>

<body>
    <div id="react-root"></div>
</body>
</html>

webpack配置

// webpack.config.js
module.exports = {
  // ...the rest of your config
  resolve: {
    alias: {
      'react-native$': 'react-native-web'
    }
  }
}

index.js 新增配置

原react-native入口

// index.js
import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('rn_web', () => App);

新增配置之后，如下：

// index.web.js
import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('rn_web', () => App);

AppRegistry.runApplication('rn_web', {
    rootTag: document.getElementById('react-root')
});

package.json 新增命令

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "web": "cross-env NODE_ENV=development node_modules/.bin/webpack-dev-server -d --config ./web/webpack.config.js --inline --hot --color",
    "build": "cross-env NODE_ENV=production ./node_modules/.bin/webpack -p --config ./web/webpack.config.js",
    "test": "jest"
}

使用 create-react-app 创建项目

npx create-react-app my-app
cd my-app
npm install react-native-web
npm start