React嵌入APP，需要的一些答案

   这篇文，是从React开发者角度出发，适用于，打算把Reactjs写的Web页面嵌入原生APP中，实现混合开发。

一、资源文件路径问题——PUBLIC_URL

   如果你使用create-react-app创建项目，执行命令 yarn build 后，直接以静态方式打开build文件夹内的index.html,会看到页面显示出现问题，打开console后会看到js、css、svg等文件的路径出现问题。

build文件夹

  由于目标是为了嵌入APP中，你只可能把静态文件交付给APP开发的同学，这个问题是必须解决的。
  从错误路径可以看到，路径是直接从系统根目录开始写的，就是说，build之后资源引用路径是以build为根目录书写的，所以需要把所有资源文件路径都变成 ./的方式才能以静态的方式正确的读到static文件夹里的文件。
  可是，如果页面中引用了很多资源文件图片、视频、字体等，不可能一个个去自动建立好的文件里去找再修改路径，这时就可以在 yarn build命令前设置 PUBLIC_URL。
windows系统下：

set PUBLIC_URL=./ yarn build

mac、linux系统下：

PUBLIC_URL=./ yarn build

完成后直接打开index.html，页面便可以正常显示了。
如果react中还使用了路由，我的经验推荐是使用HashRouter就可以正常的使用路由了。

二、嵌入APP时，希望等比缩放——动态viewport

  一般在页面头部会加入来适配移动端显示，此属性可以让元素在pc和移动端给用户带来同尺寸的视觉大小。关于viewport的详解。
  如果需要等比缩放，调整initial-scale值。例如，ios设备的devicePixelRatio=2(像素密度等级)，1px实际等于2个物理像素，便可设置initial-scale=0.5来实现等比缩放。

ios和android设备需要不同的viewport属性，可以通过 navigator.userAgent判断设置viewport值，显示出自己想要的效果。

三、ios设备onClick元素点击时有灰色背景出现——-webkit-tap-hightlight-color

  给react组件添加onClick事件后，在ios设备上点击，会自动带有点击反馈效果的灰色背景，设置伪标签:active的背景为transparent也没用，这时可以使用-webkit-tap-hightlight-color:transparent完美的解决这个问题。