利用Webpack构建React Native for Web

项目演示

React Native for Web使得可以使用React DOM在Web上运行React Native组件和API。查看在Web上运行的React Native示例的实时演示。

快速开始

1.首先对于不太了解Webpack的同学可以先看一下这篇文章：https://segmentfault.com/a/1190000006178770

2.安装react-native-web npm i react-native-web

3.在webpack中配置react-native

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

/** __dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录 */
const appDirectory = path.resolve(__dirname, '../');

module.exports = {
  devtool: 'eval-source-map',//使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle-[hash].js"//打包后输出文件的文件名
  },
  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    hot: true
  },
  module: {
    rules: [
        {
          /** 正则表达式，编译所有.js文件 */
          test: /\.js$/,
          /** 包含要编译的目录和文件 */
          include: [
            /** 根目录下的index.js */
            path.resolve(appDirectory, 'index.js'),
            /** 子目录src下所有文件 */
            path.resolve(appDirectory, 'src'),
            path.resolve(appDirectory, 'node_modules/react-native-uncompiled')
          ]
        },
        {
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader",
            },
            exclude: /node_modules/
        },
        {
            test: /\.css$/,
            use: [
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader",
                    options: {
                       modules: {
                         localIdentName: "[name]__[local]--[hash:base64:5]" // 指定css的类名格式
                       }
                   }
                }, {
                     loader: "postcss-loader"
                }
            ]
        }
    ]
  },
    /**
   * resolve配置模块如何解析
   * */
  resolve: {
    alias: {
      'react-native$': 'react-native-web'
    },
    /** 自动解析确定的扩展 */
    extensions: ['.web.js', '.js'],
    /** 告诉webpack解析模块时应搜索的目录 */
    modules: ['node_modules']
  },
  plugins: [
       new webpack.BannerPlugin('版权所有，翻版必究'),
       new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin()//热加载插件
  ]
}

4.在项目中使用demo

import React, { Component } from "react";
import { Button, Image, StyleSheet, Text, View } from "react-native";

const logoUri = `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" /svg>`;

class App extends Component {
  render() {
    return (
      <View style={styles.app}>
        <View style={styles.header}>
          <Image
            accessibilityLabel="React logo"
            source={{ uri: logoUri }}
            resizeMode="contain"
            style={styles.logo}
          />
          <Text style={styles.title}>React Native for Web</Text>
        </View>
        <Text style={styles.text}>
          This is an example of an app built with{" "}
          <Link href="https://github.com/facebook/create-react-app">
            Create React App
          </Link>{" "}
          and{" "}
          <Link href="https://github.com/necolas/react-native-web">
            React Native for Web
          </Link>
        </Text>
        <Text style={styles.text}>
          To get started, edit{" "}
          <Link href="https://codesandbox.io/s/q4qymyp2l6/" style={styles.code}>
            src/App.js
          </Link>
          .
        </Text>
        <Button onPress={() => {}} title="Example button" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  app: {
    marginHorizontal: "auto",
    maxWidth: 500
  }
});

export default App;