IOS 搭建React.js环境并运行
如果我们要在IOS项目中加载一个本地的网页,
就需要把网页写到本地的工程下面,
然后引入到IOS工程中,
当加载网页流量的时候选择加载本地的路径就好了。
项目就会去读取本地的HTML文件并用WebView去显示了。
这个就是HTML的在IOS中的显示。
那么React又是什么,做了哪些工作呢?
React就是一种编写HTML的方式,比如你在某个文件夹下面写了网页。
并且加入了React的基础库,那么你就能够用React的语法来写网页。
所以我们写React的项目,本质上就是网页的开发,并做手机端的适配。
需要把React编写的部分进行打包。
通过打包,会将项目打包成IOS手 能读的HTML文件。
这样就可以在手机上面运行了。
至于热更新,其实就是本地工程里面有一份的HTML格式,
当更新的时候,
就会手机从服务器下载最新的打包好的的HTML文件到沙盒
手机会进行选择策略,当沙盒中存在的HTML文件的时候就读取沙盒的,
不然就读取本地工程的.
接下来就是实现第一个React项目的创建。
需要项目搭建的脚手架。类似于我们创建一个的的的的Xcode中的新项目就会带了的appdelegate等等,我们只需要添加一个按钮就可以运行起来了。
首先进入某个工程文件夹
npx create-react-app my-app
第一步就出错,解决方案是更新npm库,成功后再重新上一步
npm install -g npm @ latest
成功以后再进入到my-app文件夹发现多了很多文件夹,
cd my-app npm start
这个时候发现浏览器打开了http:// localhost:3000 /
这个页面,
并显示了欢迎信息。
这时候我到src / App.js
这个路径底下修改了一些文字,然后保存,
浏览器立即就更新了页面到这里,
官方的脚手架就搭建好了
然后执行npm run build
接下来讲讲怎么把这网页运行在ios系统中
ios中运行本地服务器不是本篇的重点,
然后 阅读代码后发现加载本地HTML包的方法
define webPath [一个一个NSBundle mainBundle] pathForResource:@“web” ofType:nil]
于是把我们之前的build的文件夹给导入到工程文件中
注意这里,是蓝色的文件夹,如果是黄色的就不对了。
然后把上面的路径中@“web”
换成@"ReactWeb/build"
就好了
编译运行 手机上就看到页面了
注意官方的页面是svg的图片资源,ios 是看不到的。所以我替换了png
然后重新build后导入的。