feat(hippy-vue,hippy-react): added setNativeProps on element-node

android/sdk/src/main/java/com/tencent/mtt/hippy/modules/nativemodules/animation/TimingAnimation.java

@@ -186,7 +186,6 @@ public void parseFromData(HippyMap param)
 			 * 小于0 		无限次
 			 * 0 			1次 = (0+1)次
 			 * n  			是n次
-			 * bugFix:https://git.code.oa.com/hippy/hippy/issues/73
 			 * */
 			if(mRepeatCount > 0 )
 				mRepeatCount = mRepeatCount - 1;

android/sdk/src/main/java/com/tencent/mtt/hippy/views/image/HippyImageView.java

@@ -183,7 +183,6 @@ public void setIniProps(HippyMap iniProps) {
      * right 到右边的距离
      * top 到上边的距离
      * botttom 到下边的距离
-     * 修复:https://git.code.oa.com/hippy/hippy/issues/23
      * Robinsli
      * */
 	public void setNinePatchCoordinate(boolean shouldClearNinePatch, int left, int top, int right, int botttom)

android/sdk/src/main/java/com/tencent/mtt/hippy/views/refresh/RefreshWrapper.java

@@ -125,7 +125,6 @@ float getCompactScrollY()
 	public boolean dispatchTouchEvent(MotionEvent event)
 	{
 		/**
-		 * 解决bug：https://git.code.oa.com/hippy/hippy/issues/70
 		 * 如果一个页面用RefreshWrapper包含ViewPager，横向滑动很容易触发下拉刷新。
 		 */
         float nowMoveY = event.getRawY();

android/sdk/src/main/java/com/tencent/mtt/hippy/views/textinput/HippyTextInputController.java

@@ -597,7 +597,6 @@ public boolean queueIdle()
 				 * public static final int FOCUS_BLOCK_DESCENDANTS = 0x60000;
 				 * 
 				 * 为了避免在clearFoucus过后,不要让HippyRootView的其他View获得焦点,先把HippyRootView的焦点屏蔽掉.
-				 * https://git.code.oa.com/hippy/hippy/issues/41
 				 */
 
 				//find the HippyRootView

docs/README.md

@@ -4,14 +4,6 @@ Hippy 可以理解为一个精简版的浏览器，从底层做了大量工作
 
 同时，Hippy 从底层进行了大量优化，在启动速度、可复用列表组件、渲染效率、动画速度、网络通信等等都提供了业内顶尖的性能表现。
 
-## 交流链接
-
-* [文章专栏](https://cloud.tencent.com/developer/column/84006)
-* QQ 群：[784894901](//shang.qq.com/wpa/qunwpa?idkey=7bff52aca3aac75a4f1ba96c1844a5e3b62000351890182eb60311542d75fa1a) - 点击链接启动 QQ 加入，或者复制群号码手工加入
-* QQ群二维码，使用手机QQ扫描加入
-
-![QQ群二维码](https://puui.qpic.cn/vupload/0/1578363513271_py0yktxq7x.png/0)
-
 ## 功能对比
 
 Hippy 从底层增加了很多和浏览器相同的接口，方便了开发者使用，这里有几个 Hippy 的独有功能。
@@ -59,100 +51,100 @@ Hippy 在开发体验上也进行了大量优化，包含但不限于，跟浏
 ## 大家都在用
 
 <div style="display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start">
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_11384_1543315194/128" alt="QQ浏览器" width="80"/>
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_11384_1543315194/128" alt="QQ浏览器" width="50"/>
   <p style="font-size:16px"><a target="_blank" style="text-decoration:none;color:#34495e" href="https://mb.qq.com/" title="QQ浏览器">QQ浏览器</a></p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_6633_1603250105/128" width="80" alt="手机QQ" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_6633_1603250105/128" width="50" alt="手机QQ" />
   <p style="font-size:16px"><a target="_blank" style="text-decoration:none;color:#34495e" href="https://im.qq.com/mobileqq/" title="手机QQ">手机QQ</a></p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_10966186_1533019715/128" alt="全民K歌" width="80" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_10966186_1533019715/128" alt="全民K歌" width="50" />
   <p style="font-size:16px">
   <a target="_blank" style="text-decoration:none;color:#34495e" href="https://kg.qq.com/html/contest/kg-intro.html" title="全民K歌">全民K歌</a>
   </p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_6259_1533003792/128" width="80" alt="QQ音乐" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_6259_1533003792/128" width="50" alt="QQ音乐" />
   <p style="font-size:16px">
   <a target="_blank" style="text-decoration:none;color:#34495e" href="https://y.qq.com/download/download.html" title="QQ音乐">QQ音乐</a>
   </p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//res.imtt.qq.com/hippydoc/img/tv.png" width="80" alt="云视听极光" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//res.imtt.qq.com/hippydoc/img/tv.png" width="50" alt="云视听极光" />
   <p style="font-size:16px">
   <a target="_blank" style="text-decoration:none;color:#34495e" href="https://tv.qq.com/" title="云视听极光">云视听极光</a>
   </p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_10261931_1551433926/128" width="80" alt="微视" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_10261931_1551433926/128" width="50" alt="微视" />
   <p style="font-size:16px">
   <a target="_blank" style="text-decoration:none;color:#34495e" href="https://weishi.qq.com/" title="微视">微视</a>
   </p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_5848_1558087382/128" width="80" alt="应用宝" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_5848_1558087382/128" width="50" alt="应用宝" />
   <p style="font-size:16px">
   <a target="_blank" style="text-decoration:none;color:#34495e" href="https://www.myapp.com" title="应用宝">应用宝</a>
   </p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_42270933_1551941158/128" width="80" alt="NOW直播" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_42270933_1551941158/128" width="50" alt="NOW直播" />
   <p style="font-size:16px">
   <a target="_blank" style="text-decoration:none;color:#34495e" href="https://now.qq.com/" title="NOW直播">NOW直播</a>
   </p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//res.imtt.qq.com/res_mtt/hippydoc/voov.png" width="80" alt="VOOV直播" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//res.imtt.qq.com/res_mtt/hippydoc/voov.png" width="50" alt="VOOV直播" />
   <p style="font-size:16px">
   <a target="_blank" style="text-decoration:none;color:#34495e" href="https://www.voovlive.com/" title="VOOV直播">VOOV直播</a>
   </p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_52445834_1548053409/128" width="80" alt="心悦俱乐部" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_52445834_1548053409/128" width="50" alt="心悦俱乐部" />
   <p style="font-size:16px">
   <a target="_blank" style="text-decoration:none;color:#34495e" href="https://xinyue.qq.com" title="心悦俱乐部">心悦俱乐部</a>
   </p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_42287337_1556173463/128" width="80" alt="王者营地" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_42287337_1556173463/128" width="50" alt="王者营地" />
   <p style="font-size:16px">
   <a target="_blank" style="text-decoration:none;color:#34495e" href="https://sj.qq.com/myapp/detail.htm?apkName=com.tencent.gamehelper.smoba" title="王者营地">王者营地</a>
   </p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_12082013_1545355964/128" width="80" alt="天天快报" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_12082013_1545355964/128" width="50" alt="天天快报" />
   <p style="font-size:16px">
   <a target="_blank" style="text-decoration:none;color:#34495e" href="https://kuaibao.qq.com/download.html" title="天天快报">天天快报</a>
   </p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_12259403_1545708417/128" width="80" alt="WiFi管家" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_12259403_1545708417/128" width="50" alt="WiFi管家" />
    <p style="font-size:16px">
   <a target="_blank" style="text-decoration:none;color:#34495e" href="https://wifi.qq.com/" title="WiFi管家">WiFi管家</a>
   </p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_206354_1558415148/128" width="80" alt="腾讯自选股" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_206354_1558415148/128" width="50" alt="腾讯自选股" />
   <p style="font-size:16px">
   <a target="_blank" style="text-decoration:none;color:#34495e" href="https://sj.qq.com/myapp/detail.htm?apkName=com.tencent.portfolio" title="腾讯自选股">腾讯自选股</a>
   </p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_52754761_1557837008/128" width="80" alt="大丰满满" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_52754761_1557837008/128" width="50" alt="大丰满满" />
   <p style="font-size:16px">
   <a target="_blank" style="text-decoration:none;color:#34495e" href="https://sj.qq.com/myapp/detail.htm?apkName=com.taifung.broker" title="大丰满满">大丰满满</a>
   </p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_52797852_1545191305/128" width="80" alt="企鹅号" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_52797852_1545191305/128" width="50" alt="企鹅号" />
   <p style="font-size:16px">
   <a target="_blank" style="text-decoration:none;color:#34495e" href="https://android.myapp.com/myapp/detail.htm?apkName=com.tencent.omapp" title="企鹅号">企鹅号</a>
   </p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_52802703_1546489662/128" width="80" alt="马克思主义" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 20px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_52802703_1546489662/128" width="50" alt="马克思主义" />
   <p style="font-size:16px">
   <a target="_blank" style="text-decoration:none;color:#34495e" href="https://sj.qq.com/myapp/detail.htm?apkName=com.rmlt.marxism" title="马克思主义">马克思主义</a>
   </p>
@@ -162,32 +154,32 @@ Hippy 在开发体验上也进行了大量优化，包含但不限于，跟浏
 ## 团队贡献
 
 <div style="display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start">
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin:10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_10966186_1533019715/128" width="80" alt="TME 全民K歌团队" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;width:130px;margin:5px 10px 5px 10px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_10966186_1533019715/128" width="50" alt="TME 全民K歌团队" />
   <p style="font-size:16px">TME 全民K歌团队</p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin:10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_6259_1533003792/128" width="80" alt="TME QQ音乐团队" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;width:130px;margin:5px 10px 5px 10px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_6259_1533003792/128" width="50" alt="TME QQ音乐团队" />
   <p style="font-size:16px">TME QQ音乐团队</p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//pp.myapp.com/ma_icon/0/icon_52754761_1555775310/96" width="80" alt="CDG大丰满满/自选股团队" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;width:130px;margin:5px 10px 5px 10px">
+  <img src="//pp.myapp.com/ma_icon/0/icon_52754761_1555775310/96" width="50" alt="CDG大丰满满/自选股团队" />
   <p style="font-size:16px">CDG大丰满满/自选股团队</p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//res.imtt.qq.com/res_mtt/hippydoc/qg-team.png" width="80" alt="QGraphics团队" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;width:130px;margin:5px 10px 5px 10px">
+  <img src="//res.imtt.qq.com/res_mtt/hippydoc/qg-team.png" width="50" alt="QGraphics团队" />
   <p style="font-size:16px">QGraphics团队</p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//res.imtt.qq.com/res_mtt/hippydoc/IVW_23.png" width="80" alt="IVWEB团队" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;width:130px;margin:5px 10px 5px 10px">
+  <img src="//res.imtt.qq.com/res_mtt/hippydoc/IVW_23.png" width="50" alt="IVWEB团队" />
   <p style="font-size:16px">IVWEB团队</p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//res.imtt.qq.com/res_mtt/hippydoc/hippy-logo-small.gif" width="80" alt="腾讯信息流平台部团队" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;width:130px;margin:5px 10px 5px 10px">
+  <img src="//res.imtt.qq.com/res_mtt/hippydoc/hippy-logo-small.gif" width="50" alt="腾讯信息流平台部团队" />
   <p style="font-size:16px">腾讯信息流平台部团队</p>
  </span>
- <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;margin: 10px">
-  <img src="//res.imtt.qq.com/hippydoc/img/wii-team.png" width="80" alt="游云南WII团队" />
+ <span style="display:flex;flex-direction:column;justify-content:flex-start;align-items: center;width:130px;margin:5px 10px 5px 10px">
+  <img src="//res.imtt.qq.com/hippydoc/img/wii-team.png" width="50" alt="游云南WII团队" />
   <p style="font-size:16px">游云南WII团队</p>
  </span>
  </div>
@@ -249,6 +241,14 @@ Hippy 在开发体验上也进行了大量优化，包含但不限于，跟浏
  </span>
  </div>
 
+## 交流链接
+
+* [文章专栏](https://cloud.tencent.com/developer/column/84006)
+* QQ 群：[784894901](//shang.qq.com/wpa/qunwpa?idkey=7bff52aca3aac75a4f1ba96c1844a5e3b62000351890182eb60311542d75fa1a) - 点击链接启动 QQ 加入，或者复制群号码手工加入
+* QQ群二维码，使用手机QQ扫描加入
+
+ ![QQ群二维码](https://puui.qpic.cn/vupload/0/1578363513271_py0yktxq7x.png/0)
+
 ## 总结
 
 如果您准备好了，那就 [开始接入 Hippy](guide/integration.md) 吧。

docs/_coverpage.md

@@ -10,6 +10,6 @@
 
 
 [GitHub](//github.com/Tencent/Hippy)
-[开始接入](guide/integration.md)
+[快速开始](/README.md)
 
 ![color](#fff)

docs/_navbar.md

@@ -34,3 +34,4 @@
   * [外观](style/appearance.md)
   * [颜色](style/color.md)
   * [变形](style/transform.md)
+  * [setNativeProps](style/setNativeProps.md)

docs/style/_sidebar.md

@@ -4,3 +4,4 @@
 * [外观](style/appearance.md)
 * [颜色](style/color.md)
 * [变形](style/transform.md)
+* [setNativeProps](style/setNativeProps.md)

docs/style/setNativeProps.md

@@ -0,0 +1,34 @@
+# setNativeProps
+
+在做一些高频动画效果时由于需要经历JS层的多次重新渲染，会出现滞后卡顿的现象，`setNativeProps`提供了`ElementNode`下"简单粗暴"的方法直接修改终端原生组件的样式来优化性能。P.S. 可能产生的数据同步等逻辑上的副作用需要业务自行解决
+
+## React
+
+[[范例：SetNativeProps.jsx]](//github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/externals/SetNativeProps/index.jsx)
+
+除了element component（如div）外，React 没有直接暴露 ElementNode 给业务使用，可以通过 [React.forwardRef](https://zh-hans.reactjs.org/docs/forwarding-refs.html) 转发，或者使用 Hippy 提供的 `UIManagerModule.getElementFromFiberRef` 方法（该方法会从当前节点逐个遍历子节点直到找到 `ElementNode` 元素并返回，有一定性能损耗） 获取第一个 `ElementNode`，使用 demo 如下：
+
+```javascript
+ class BusinessComponent extends React.Component {
+    constructor(props) {
+      super(props);
+      this.customComRef = null;
+    }
+    componentDidMount() {
+       const customElementDom = UIManagerModule.getElementFromFiberRef(this.customComRef);
+       customElementDom.setNativeProps({
+         height: 100
+       })
+    }
+   render() {
+      return <CustomComponent ref={ref => this.customComRef = ref} />
+   }
+ }
+
+   ```
+
+## Vue
+
+[[范例：demo-set-native-props.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-set-native-props.vue)
+
+Vue 如果是 HTML 元素，直接通过`$refs`可以获取到 DOM；如果是自定义组件，可以通过`$refs.x.$el` 获取，`setNativeProps`使用方法和 React 一致