如果你使用react native开发了app，会不会想有一个站点呢。如果你想，那么react-native-web就有用武之地了。只要不是平台相关的组件基本都可以复用，包括js样式。更不用说内置的accessibility。
react-native-web比较倾向于推荐expo的，更多的介绍是关于create-react-app生成的代码的。但是这篇文章是对于已经能存在的mobile的项目而言的。这是一种更急普遍，或者更需要这篇文章的情况。
代码在这里
添加依赖
要是使用react-native-web首先要添加必须的依赖。首先跳转到项目的根目录
cd path-to-your-project先把react-native-web加上
yarn add react-native-web然后相关依赖
yarn add -D babel-plugin-react-native-web webpack webpack-cli webpack-dev-server html-webpack-plugin react-dom babel-loader url-loader @svgr/webpack如果你有前端的开发经验的话，看看我们现在项目的结构你会发现少了很多。作为一个单页应用，单页都还没有呢。dev server和打包的老大哥webpack也没有。这些我们也都要一一加上。
index.html
<!DOCTYPE html>
<html>
<!-- 略 -->
<body>
<div id="app-root"></div>
</body>
</html>这个就是单页应用的那个单页。是作为整个app的承载页。所有的js都运行在这个页面里。
webpack.config.js
// ...
const compileNodeModules = [
// 添加需要编译的react-native包
].map((moduleName) => path.resolve(appDirectory, `node_modules/${moduleName}`));
// ...webpack是打包工具。开发的时候跑dev server，发生产的时候打生产包。这里需要制定webpack把依赖到的包都编译了。
如果你不这么做的话，大概率你会遇到这个么一个报错。比如你用了react-native-gesture-handler。
ERROR in ./node_modules/react-native-gesture-handler
Module parse failed: Unexpected token
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders然后我们也会添加所有需要编译的代码。比如index.web.js，App.web.tsx。还有src目录下的所有代码，以及上文提到的所有的库。
// ...
const babelLoaderConfiguration = {
test: /\.js$|tsx?$/,
// Add every directory that needs to be compiled by Babel during the build.
include: [
path.resolve(__dirname, 'index.web.js'), <-- Entry to web project
path.resolve(__dirname, 'App.web.tsx'), // <-- or App.js
path.resolve(__dirname, 'src'), // <-- Main source folder
...compileNodeModules, // <-- Modules we compiles above
],
// ...还有一个很重要的文件：index.web.js
这个文件是给上文说的index.html挂载react-native-web的组件的。就如同在index.js看到的要AppRegistry.registerComponent一样。在web开发中也需要注册组件，同时还要挂载组件。
index.web.js
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import App from './App';
if (module.hot) {
module.hot.accept();
}
AppRegistry.registerComponent(appName, () => App); // 1
AppRegistry.runApplication(appName, { // 2
initialProps: {},
rootTag: document.getElementById('app-root'),
});
// 1. 和index.js一样，注册组件
// 2. 挂载组件。细节没看，估计是用来调用react-dom来实现的。
不同平台指定代码。比如这里的index.web.js。
就是特指给web平台执行的代码。在ios和android也可以分别指定在某个平台执行的代码。
比如只在ios执行，可以命名为SomeComp.ios.js。在android的就可以叫做SomeComp.android.js。另外需要添加一个App.web.tsx
//...
<TouchableOpacity
onPress={() => setCount(count + 1)}
style={styles.button}>
<Text>Click me!</Text>
</TouchableOpacity>
<WebSection title="web title">
<Text>Hello Web</Text>
</WebSection>
<Text>You clicked {count} times!</Text>
//...明显可以看到处理点击的TouchableOpacity和显示文字的Text组件都可以正常使用。
复用代码
在YouKnowApp/src/WebSection.tsx这个文件是直接复用的js/components/Section.tsx这个文件。直接用会出问题。
Module parse failed: Unexpected token (11:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file只要注释掉这一行就好了。
// import { Colors } from 'react-native/Libraries/NewAppScreen';估计这行代码使用了flow导致的。
Flow是FB开发的一个js的类型增强工具。现在用的已经很少了，主要是FB自己的很多代码还包含了这部分。解决的办法可能要查阅一下是否存在一个webpack的loader可以专门处理flow代码。
配置Scripts
最后在package.json文件添加脚本执行的命令
"build": "rm -rf dist/ && webpack --mode=production --config webpack.config.js",
"web": "webpack serve --mode=development --config webpack.config.js"运行
yarn web查看http://localhost:8080就可以看到效果了。
完
后续遇到多平台代码共享的问题再继续更新。
ios
android
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。