react 移动端 兼容性问题和一些小细节

• 使用 ES6 的浏览器兼容性问题
• react 对低版本的安卓webview 兼容性
• iOS下 fixed与软键盘的问题
• onClick 阻止冒泡
• meta对于移动端的一些特殊属性
• 页面禁止复制、选中文本

1.使用 ES6 的浏览器兼容性问题

由于 Babel 默认只转换转各种 ES2015 语法，而不转换新的 API，比如 Promise，以及 Object.assign、Array.from 这些新方法，这时我们需要提供一些 ployfill 来模拟出这样一个提供原生支持功能的浏览器环境。 主要有两种方式：babel-runtime 和 babel-polyfill。A.babel-runtime  1.babel-runtime 的作用是模拟 ES2015 环境，包含各种分散的 polyfill 模块，我们可以在自己的模块里单独引入，比如 promise：![图片描述][1]  2.它们不会在全局环境添加未实现的方法，只是这样手动引用每个 polyfill 会非常低效，我们可以借助 Runtime transform 插件来自动化处理这一切。  首先使用 npm 安装![图片描述][2]  3.然后在 webpack 配置文件的 babel-loader 增加选项：![图片描述][3]

B.babel-polyfill

而 babel-polyfill 是针对全局环境的，引入它浏览器就好像具备了规范里定义的完整的特性，一旦引入，就会跑一个 babel-polyfill 实例。用法如下： 1.安装 babel-polyfill![图片描述][4] 2.在入口文件中引用：![图片描述][5]

其实做到这些，在大部分浏览器就可以正常跑了，

2.react 对低版本的安卓webview 兼容性

A.android较低版本webview不支持Object.assign改用var objectAssign = require('object-assign’)  这种情况上面方案可以解决B.import React from 'react';import ReactDOM from 'react-dom';//不可放在其他模块引入的后面，否则android5.0及以下版本webview报错

3.iOS下 fixed与软键盘的问题

fixed失效是由于软键盘唤起后，页面的 fixed 元素将失效（ios认为用户更希望的是元素随着滚动而移动，也就是变成了 absolute 定位）， 既然变成了absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。解决方案就是让整个页面处于一屏高度就能解决问题的根本      
    
         
     
         
     
     
     
     
      
    
      
 样式：warper{     position: absolute;     width: 100%;     left: 0;     right: 0;     top: 0;     bottom: 0;     overflow-y: scroll;     -webkit-overflow-scrolling: touch;/* 解决ios滑动不流畅问题 */ }.fix-bottom{    position:fixed;    bottom:0;    width: 100%;}
     
    

4.onClick 阻止冒泡

A、阻止合成事件间的冒泡，用e.stopPropagation();![图片描述][6]B、阻止原生事件与最外层document上的事件间的冒泡，用e.nativeEvent.stopImmediatePropagation();![图片描述][7]C、阻止合成事件与除最外层document上的原生事件上的冒泡，通过判断e.target来避免![图片描述][8]

5.meta对于移动端的一些特殊属性

6.页面禁止复制、选中文本

-webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none;  user-select: none;