IOS 搭建React.js环境并运行

如果我们要在IOS项目中加载一个本地的网页,

就需要把网页写到本地的工程下面,

然后引入到IOS工程中,

当加载网页流量的时候选择加载本地的路径就好了。

项目就会去读取本地的HTML文件并用WebView去显示了。

这个就是HTML的在IOS中的显示。

那么React又是什么,做了哪些工作呢?

React就是一种编写HTML的方式,比如你在某个文件夹下面写了网页。

并且加入了React的基础库,那么你就能够用React的语法来写网页。

所以我们写React的项目,本质上就是网页的开发,并做手机端的适配。

需要把React编写的部分进行打包。

通过打包,会将项目打包成IOS手 能读的HTML文件。

这样就可以在手机上面运行了。

至于热更新,其实就是本地工程里面有一份的HTML格式,

当更新的时候,

就会手机从服务器下载最新的打包好的的HTML文件到沙盒

手机会进行选择策略,当沙盒中存在的HTML文件的时候就读取沙盒的,

不然就读取本地工程的.


接下来就是实现第一个React项目的创建。

需要项目搭建的脚手架。类似于我们创建一个的的的的Xcode中的新项目就会带了的appdelegate等等,我们只需要添加一个按钮就可以运行起来了。

是一套Facebook完整的这个组件的流程

首先进入某个工程文件夹

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中运行本地服务器不是本篇的重点,

所以我随意找了一篇搭建本地服务器的演示

下载了文章封装好的IOS工程文件

然后 阅读代码后发现加载本地HTML包的方法

define webPath [一个一个NSBundle mainBundle] pathForResource:@“web” ofType:nil]

于是把我们之前的build的文件夹给导入到工程文件中
这里写图片描述

注意这里,是蓝色的文件夹,如果是黄色的就不对了。

然后把上面的路径中@“web” 换成@"ReactWeb/build" 就好了

编译运行 手机上就看到页面了

这里写图片描述

注意官方的页面是svg的图片资源,ios 是看不到的。所以我替换了png

然后重新build后导入的。

猜你喜欢

转载自blog.csdn.net/github_35041937/article/details/79523559
今日推荐