React Native for Web配置

兼容性：React Native 0.55。

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

• 高质量的Web界面：可以轻松地在JavaScript中创建fast，自适应的Web UI。它提供原生质量的交互，支持多种输入模式（触摸，鼠标，键盘），优化的供应商前缀样式，内置支持RTL布局，内置可访问性，并与React Dev Tools集成。

• 编写一次，随处渲染：与现有的React DOM组件互操作，并与大多数React Native API兼容。您可以为本机和Web开发新组件，而无需重写现有代码。React Native for Web也可以使用Node.js渲染到服务器上的HTML和关键CSS。

浏览器支持：Chrome，Firefox，Edge，Safari 7 +，IE 10+。

快速开始

最简单的入门方法是编辑此CodeSandbox模板（或Glitch）。你不需要安装任何东西来试试。

有关安装和配置的详细信息，请阅读入门指南。

文档

有关整体API，设计详细信息以及有关手势响应程序系统和动画的信息，请参阅React Native文档。

某些组件和API通过Web的其他功能进行了扩展。在少数情况下，网络上缺少Android或iOS的功能。这些差异记录在网站上。

指南

这些指南详细介绍了如何使用React Native创建可访问的Web体验。某些特定于Web的模式记录在“Web配方”指南中。

• Getting started
• Client-side rendering
• Server-side rendering
• Style
• Accessibility
• Internationalization
• Direct manipulation
• Web recipes
• Multi-platform apps
• Experimental / unstable use

.babelrc

{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"react-native"
],
"plugins": [
["module-resolver", {
"alias": {
"^react-native$": "react-native-web"
}
}]
]
}

package.json

{
"name": "rnweb",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"ios": "react-native run-ios",
"android": "react-native run-android",
"webdev": "./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.config.js --inline --hot --colors",
"webprod": "./node_modules/.bin/webpack -p --config ./web/webpack.config.js",
"test": "jest"
},
"dependencies": {
"@babel/runtime": "^7.4.4",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-native": "0.59.8",
"react-native-web": "^0.11.2"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.4",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"babel-jest": "^24.8.0",
"babel-loader": "^8.0.6",
"babel-plugin-module-resolver": "^3.2.0",
"babel-plugin-react-native-web": "^0.11.2",
"babel-preset-react-native": "^5.0.2",
"jest": "^24.8.0",
"make-dir-cli": "^2.0.0",
"react-test-renderer": "16.8.3",
"source-map-loader": "^0.2.4",
"url-loader": "^1.1.2",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
},
"jest": {
"preset": "react-native"
}
}

pasting

web/webpack.config.js

/**
* @Name webpack.config.js
* @Description react-native-web webpack打包配置文件*/
const path = require('path');
const webpack = require('webpack');
/** __dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录 */
const appDirectory = path.resolve(__dirname, '../');
/**
* Babel其实是一个编译JavaScript的平台
* 1、使用最新的JavaScript代码（ES6，ES7...）而不用管新标准是否被当前使用的浏览器完全支持
* 2、使用基于JavaScript进行了拓展的语言，比如React的JSX；
* */
const babelLoaderConfiguration = {
/** 正则表达式，编译所有.js文件 */
test: /.js$/,
/** 包含要编译的目录和文件 */
include: [
/** 根目录下的index.js */
path.resolve(appDirectory, 'index.js'),
/** 子目录src下所有文件 */
path.resolve(appDirectory, 'src'),
path.resolve(appDirectory, 'node_modules/react-native-uncompiled')
],
use: {
loader: 'babel-loader',
/** webpack会自动调用.babelrc里的babel配置选项 */
options: {
cacheDirectory: true,
// presets: ['react-native'],
// plugins: ['react-native-web']
}
}
};
const imageLoaderConfiguration = {
test: /.(gif|jpe?g|png|svg)$/,
use: {
/**
* file-loader解决路径问题，url-loader根据limit值对图片编码，生成dataURl
* url-loader内置了file-loader
* */
loader: 'url-loader',
options: {
name: '[name].[ext]'
}
}
};
module.exports = {
/** webpack4.x增加的选项，development/production */
mode: process.env.NODE_ENV || 'production',
/** 开发时调试源码，会影响编译速度，生产环境请注释该行 */
devtool: 'eval-source-map',
/** entry入口 */
entry: [
path.resolve(appDirectory, 'index.js'),
],
/** output出口 */
output: {
/** 打包后输出文件的文件名 */
filename: 'bundle.web.js',
/** 打包后的文件存放的地方 */
path: path.resolve(appDirectory, 'dist')
},
/**
* 通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理。
* 比如分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，
* 对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。
* loader配置选项参数说明：
*  test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
*  loader：loader的名称（必须）
*  include/exclude：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（可选）
*  query：为loaders提供额外的设置选项（可选）
* */
module: {
rules: [
babelLoaderConfiguration,
imageLoaderConfiguration
]
},
/**
* resolve配置模块如何解析
* */
resolve: {
alias: {
'react-native$': 'react-native-web'
},
/** 自动解析确定的扩展 */
extensions: ['.web.js', '.js'],
/** 告诉webpack解析模块时应搜索的目录 */
modules: ['node_modules']
},
/**
* 使用webpack构建本地服务器
* npm install --save-dev webpack-dev-server
* yarn add -D webpack-dev-server
* http://localhost:8080
* */
devServer: {
/** 本地服务器所加载的页面所在的目录 */
contentBase: "./dist",
/** true所有的跳转将指向index.html */
historyApiFallback: true,
/** 当源文件改变时实时刷新 */
inline: true
}
};

web/index.html

<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
<meta charset="UTF-8">
<title>React Native Web In Superbuy App</title>
<meta name="viewport" content="initial-scale=1.0,width=device-width">
<style>
html, body { height: 100%; width: 100%; overflow: hidden; }
.react-app { height: 100%; overflow: hidden; }
</style>
</head>
<body style="height:100%">
<div id="react-app" style="display:flex;height:100%"></div>
<script src="./bundle.web.js"></script>
</body>
</html>

index.js

import {AppRegistry, Platform} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';
// register the app
AppRegistry.registerComponent(appName, () => App);
if (Platform.OS === 'web') {
AppRegistry.runApplication(appName, {
initialProps: {},
rootTag: document.getElementById('react-app')
});
}