写在前面
作为现在的移动开发者，即使没有用过写过，多多少少也有听过React Native这个东西。
它是个什么东西？
Facebook出品，目标是让你写的一套代码，到处都可以运行。目前可以做到写一套代码，就能打包出iOS和Android的应用，分别在两个平台上运行。
想学习的话？
1、对于有web前端的开发者，会React基本可以上手开发（作为前端说自己不会React都不好意思出去面试了吧？）。因为React Native的代码结构与React，同是Facebook家的东西，非常相似，看名字就可以感觉一下。
2、对于原生开发者，就需要学习下React的核心思想了。生命周期之类的。再者就是会点JavaScript语法。实际上写起来也不困难，只要会写一个页面，后面就是我们熟悉的套模板，Ctrl+C、Ctrl+V。
附上React Native的一个学习网站: https://reactnative.cn
那么，能不能在电脑或者手机浏览器，把应用像原生一样运行起来？
也是可以的。
GitHub上面有一个开源项目，React-Native-Web，实现把你基于React Native写的代码，打包成Web项目，也就是转成浏览器可以加载的Html页面。
在这一步之前，你只需要像平时一样，写普通的React Native的页面。再转一下，无感知地，你的代码就可以在浏览器上面跑起来了。iOS/Android/Web三端运行，想想就很刺激 ...
(ノ=Д=)ノ┻━┻
下面，来一步步把React Native的代码，在浏览器跑起来吧～
一步步构建
这里默认你已经把 React Native的开发环境 搭建好了。
1、初始化一个React Native项目，命令行执行
react-native init MyApp
（这就是你以后放代码的目录了，coding吧...）
2、根目录新建index.web.js，复制保存
import App from './App'
import { AppRegistry } from 'react-native'
// register the app
AppRegistry.registerComponent('App', () => App)
// web enterance
AppRegistry.runApplication(
'App',
{
initialProps: {},
rootTag: document.getElementById('react-app')
}
)
3、修改 根目录/package.json，分别在后面加上，保存：
...
"scripts": {
...
// 后面加上
"web": "webpack-dev-server --config ./web/webpack.config.js --content-base ./web --inline"
}
"dependencies": {
...
// 后面加上
"react-art": "^16.8.3",
"react-dom": "^16.8.3",
"react-native-web": "^0.10.0"
},
"devDependencies": {
...
// 后面加上
"@babel/core": "^7.3.3",
"babel-loader": "^8.0.5",
"file-loader": "^3.0.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1",
"webpack-html-plugin": "^0.1.1"
},
...
3、根目录新建web文件夹
4、web文件夹下，新建webpack.config.js，复制保存
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, '../index.web'), // 入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 输出的路径
filename: 'bundle.js' // 打包后文件
},
resolve: {
alias: {
'react-native$': 'react-native-web'
}
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader',
options: {
}
},
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|svg)$/,
use: {
loader: 'file-loader',
options: {
// name: 'images/[name].[ext]'
}
},
exclude: /node_modules/
}
]
},
devServer: {
port: 9090
}
}
5、web文件夹下，新建index.html，复制保存
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
</head>
<body>
<div id="react-app" style="height: 100vh; display: flex;"></div>
<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
6、回到根目录下，命令行执行
npm install
7、根目录下，命令行执行
npm run web，即可在浏览器输入 localhost:9090 看到效果，如下：
闲聊一下
通过以上的开源项目，并不意味着可以把整个React Native项目，完全地搬到Web上面去渲染。它只能做到兼容大部分组件，这个在github上面有说明。
它适用于
开发一些需要在web端展示，且较为简单的页面。比如活动页，展示页，通用设置等。
优势在于，
这部分的代码可以复用，相应地减少前端开发人员的人力投入。而且，对于React Native开发人员来说，并不需要额外的学习成本，转换是无感知的。
其它的
除了React Native，Google也推出了自家的跨平台方案Flutter。
目前越发的有大前端趋势，要做到三端开发，掌握一平跨平台方案，应该是最省时省力的了。对于单端开发者iOS/Android/Web，懂跨平台，也能提高自身在人才市场的竞争力吧。
以上代码若有改动，文章也会保持更新~
网友评论