打造一个 React、React Native、Dva 三位一体的脚手架,提供公司项目使用。
本篇第一篇,比较简单,搭建一个 ReactNative、ReactNativeWeb 可运行的工程。
react-native-web这个工程的作者,是前Twitter前端工程师,作者使用React实现了大部分常用的ReactNative的组件,webpack运行时动态替换,使得RN代码可以运行在web端。
首先初始化RN工程,使用ReactNative init方法,具体参考RN官网即可。
$ sudo npm i -g react-native-cli
$ react-native init rnweb
第二部处理依赖包:
我的package.json 中的依赖只有:react、react-dom、react-native、react-scripts、react-native-web。
具体文件内容如下:
{
"name": "rnwebdva",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"ss": "react-scripts start",
"test": "jest"
},
"main": "src/index.js",
"dependencies": {
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "0.59.8",
"react-native-web": "^0.11.4",
"react-scripts": "^3.0.1"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
本脚手架中没有webpack配置文件,使用默认配置。
运行本地服务使用 yarn ss 或 npm run ss。
期间 react-native run-ios
的时候出现的问题,使用iOS RN 0.45以上版本所需的第三方编译库这篇文章解决了。
参考:
- react-native-web、RN中文管网、webpack中文管网。
- 一个由react-native、react-navigation、dva搭建的简易架子
- 使用react-native-web将你的react-native应用H5化
- iOS RN 0.45以上版本所需的第三方编译库
补充说明:
由于一些非技术原因,我调研了多方面的东西,暂时研发中心不放在 React、React Native、Dva 三个集成一个项目里的这个需求了,但是想法和积累还是有一些。
欢迎讨论,如果你有这方面的需要和想法。
网友评论