日前，公司的一个也许需要，
需要做一个app，同时也要在微信上应用该业务
于是选择了 react-native 使用制作， 而抛弃了 之前的 ionic ，基于angular的开发模式
先说一下整体思路
ios，安卓， 直接使用react-native 没有任何问题
那么， 在web上如何跑起来？
逛街了一圈GitHub
找到这么一个东西 react-native-web
地址：necolas/react-native-web
什么意思呢？
大概的意思就是说，把react-native 调用的组件， 用web 再实现一边
作者官方写到：
"React Native for Web" is a project to bring React Native's building blocks and touch handling to the Web.
Browse the UI Explorer to see React Native examples running on Web. Or remix the React Native for Web: Playground on Glitch.
这个框架的原理大概是
例如 我们代码里写到
import {Text} from 'react-native';
大家都知道 这个是调用原生的组件
那么web 怎么去解释这一段呢？
这时候就靠万能的 webpack了
web pack 是将 所有js片段，打包成一个 app.js
既然说到打包， 那我们可以自己配置打包过程
webpack.config.js
里面这么写到
alias: {
'react-native': 'react-native-web'
},
也就是说， 所有 import 的组件， 在webpack 功能下， 都去调用了 react-native-web，而抛弃了 react-native
这应该是最基础的原理了
接下来我们有很多路径问题，需要替换
1、babel的解析，。webpack。并不能解析 react-native 的语言类型，需要babel去解析， 于是 webpack.config.js 有了这么一段
const babelLoaderConfiguration = {
test: /\.js$/,
// Add every directory that needs to be compiled by Babel during the build
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules/react-native-uncompiled')
],
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
// The 'react-native' preset is recommended (or use your own .babelrc)
presets: ['react-native']
}
}
};
2、调用图片怎么办？路径位置读错了，于是又有了这一段
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]'
}
}
};
其实这些都在官方演示里面
大家可以去看看
好， 既然 webpack 配置ok了，那么 应该可以跑起来了吧
结果还是碰到一堆问题，什么问题呢？ 兼容！
react-native 最新的版本是 0.47，依赖的react 版本是. 16.0.0
而react-native-web 依赖的 却是 [email protected] [email protected]
这可怎么办？难道把react-native 退回。0.42版本来兼容react-native-web？
谁会甘心呢？ react-native 每个版本，可以说 都有重大性能升级啊
踌躇了很久，终于到找了一个解决办法， 怎么搞呢？
既然是依赖， 那我们完全可以各用各的 react 版本，
怎么各用各的呢？
其实很简单，
我们都知道 依赖包是放置于 node_modules，而我们的 react 也在里面
那我可以 进入到 ./node_modules/react-native-web 里面，
再装一层的 node_modules
那么 react-native-web 就可以在 ./node_modules/react-native-web/node_modules/ 找到他要用的。react版本
这样就可以成功躲过依赖关系。
但是务必要注意， 不要使用 新版本太多新的标签样式。，造成不兼容问题
大致package.js的写法如下
"scripts": {
"postinstall": "cd node_modules/react-native-web/ && yarn"
}
post install 是什么意思呢？
就是你每次安装任何东西，。 如轮是yarn或者 npm 都会执行以下这个命令，
为什么要这么麻烦呢？ 因为每次yarn之后，会清空 所有依赖组件的 node_modules
也就是会自动删除 ./node_modules/react-native-web/node_modules/ 这个目录
好吧， 做到这里， 你的react-native 就可以在pc上， 在浏览器上，在app上安静的运行了。
对了，还需要入口文件：
index.web.js
代码大致如下
import { AppRegistry } from 'react-native';
import App from './src/App';
AppRegistry.registerComponent('reactTest', () => App);
AppRegistry.runApplication('reactTest', {
rootTag: window.document.getElementById('root'),
});
既然是 window.document.getElementById 肯定是需要一个html啊
scripts = [location.origin+'/'+'main.js'];
document.write(
scripts
.map(script => '')
.join('')
);
web pack 将文件打包到 main.js 即可
什么？ 怎么打包？
看官网！！！
还有什么补充的呢？
发布于 23:23
著作权归作者所有