react-native-web将RN项目转为web app

作者: 天色将变 | 来源:发表于2019-12-06 21:06 被阅读0次

react-native-web将RN项目转为web app
在web、iOS，Android端共同使用React初探（二）
webpack基础学习
Using React Native, React Native
React native web browser
RN
android接入weex
Android项目集成RN系列：修改端口号 / 离线包 / 消息
各种项目转化为maven
RN实现增量包热更新

对于webpack的基础知识，可先参考：https://www.jianshu.com/p/229ada907eaa

示例

https://github.com/zrfzhouruifeng163/RNWebAppDemo.git

如何运行

使用vscode 打开项目，然后依次执行命令：

npm install
npm run webBuild
npm run server

最终浏览器会打开一个页面，如下：

image.png

表示成功。

创建项目

react-native init RNToWebApp

根目录建立web文件夹，web下建立webpack.config.js, .babelrc 和public目录，
public目录下建立index.html。

image.png

配置package.json

{
  "name": "RNWebApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "webBuild": "cd web && webpack",
    "server": "webpack-dev-server --config web/webpack.config.js --port 8090 --open "
  },
  "dependencies": {
    "@babel/runtime": "^7.7.4",
    "react": "^16.12.0",
    "react-art": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-native": "^0.61.5",
    "react-native-web": "^0.11.7"
  },
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/preset-env": "^7.7.4",
    "@babel/preset-react": "^7.7.4",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.0.6",
    "babel-preset-react-native": "^4.0.1",
    "css-loader": "^3.2.0",
    "html-loader": "^0.5.5",
    "jest": "^24.9.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "metro-react-native-babel-preset": "^0.57.0",
    "style-loader": "^1.0.1",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

然后执行命令： npm install.
建议不要对其中的版本做修改，以免运行不正常。

webpack.config.js

const webpack = require('webpack')
const path = require('path');

const appDirectory = path.resolve(__dirname, '../')


const babelLoaderConfiguration = {
    test: /(\.jsx|\.js)$/,
    include: [
        path.resolve(appDirectory, 'src'),
        path.resolve(appDirectory, 'index.web.js'),
    ],
    use: {
        loader: 'babel-loader',
        options: {
            cacheDirectory: false,
            presets: ["@babel/preset-env", "@babel/preset-react", "module:metro-react-native-babel-preset"]
        },
    },
}
const imageLoaderConfiguration = {
    test: /\.(gif|jpe?g|png|svg)$/,
    use: {
        loader: 'url-loader',
        options: {
            // limit:1,
            // name: '/imgs/[name].[ext]',
        },
    },
}

const htmlLoaderConfiguration = {
    test: /\.html$/,
    use: {
        loader: 'html-loader'
    }
}

const cssLoaderConfiguration = {
    test: /\.css|\.less$/,
    use: ['style-loader',
        'css-loader'],
}

module.exports = {
    mode: 'development',
    entry: path.resolve(appDirectory, 'index.web.js'),
    devtool: 'eval-source-map',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(appDirectory, './web/public'),
    },
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true,
        inline: true,
        hot: true,
        progress: true,
    },

    module: {
        rules: [
            babelLoaderConfiguration,
            cssLoaderConfiguration,
            imageLoaderConfiguration,
            htmlLoaderConfiguration,
        ]
    },
    plugins: [
        // new webpack.HotModuleReplacementPlugin(),
        
    ],
    resolve: {
        extensions: ['.web.js', '.js'],
        alias: {
            'react-native$': 'react-native-web',
        },
    },
      
}

index.html

注意src="main.bundle.js",要与webpack.config.js中output属性的名字一样，表示该index引用的是那个生成的文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root' style="position:absolute;width:100%;height:100%;background:#AAAAAA">
    </div>
    <script type="text/javascript" src="main.bundle.js"></script>
  </body>
</html>

index.web.js

web版本的入口文件

import { AppRegistry } from 'react-native';
import App from './src/pages/App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);
AppRegistry.runApplication(appName, {
  initialProps: {},
  rootTag: document.getElementById('root')
});

其中的App：

import React,{Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
} from 'react-native';
class App extends Component{
  render(){
    return(
      <View>
        <Text style={styles.sectionTitle}>dd111ee11e33eddd44ddd33额d</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  sectionTitle: {
    fontSize: 24,
  },
});

export default App;

注意还有个.babelrc文件

{
    "presets": [
      "module:metro-react-native-babel-preset"
    ],
    "plugins": [
      [
        "./plugins/babel-plugin-transform-shadow"
      ]
    ]
  }