利用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;
5.项目源码:https://github.com/243348167/react-native-web-sample