fix(hippy-react,hippy-vue): fixed setNativeProps demo (#436)

Tencent · Dec 2, 2020 · cf8be7c · cf8be7c
1 parent 5cd1291
commit cf8be7c
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 16 deletions.
diff --git a/docs/style/setNativeProps.md b/docs/style/setNativeProps.md
@@ -1,6 +1,6 @@
 # setNativeProps
 
-在做一些高频动画效果时由于需要经历JS层的多次重新渲染，会出现滞后卡顿的现象，`setNativeProps`提供了`ElementNode`下"简单粗暴"的方法直接修改终端原生组件的样式来优化性能，刚方法目前只能修改 `style` 样式，其余属性暂不支持。P.S. 可能产生的数据同步等逻辑上的副作用需要业务自行解决
+在做一些高频动画效果时由于需要经历JS层的多次重新渲染，会出现滞后卡顿的现象，`setNativeProps`提供了`ElementNode`下"简单粗暴"的方法直接修改终端原生组件的样式来优化性能，该方法目前只能修改 `style` 样式，其余属性暂不支持。P.S. 可能产生的数据同步等逻辑上的副作用需要业务自行解决
 
 ## React
 

diff --git a/examples/hippy-react-demo/src/externals/SetNativeProps/index.jsx b/examples/hippy-react-demo/src/externals/SetNativeProps/index.jsx
@@ -77,7 +77,9 @@ export default class SetNativePropsDemo extends React.Component {
     console.log('touchdown x', pageX, position, screenWidth);
     if (this.demo1PointDom) {
       this.demo1PointDom.setNativeProps({
-        left: position,
+        style: {
+          left: position,
+        },
       });
     }
   }

diff --git a/examples/hippy-react-demo/src/routes.js b/examples/hippy-react-demo/src/routes.js
@@ -131,14 +131,6 @@ export default [
       style: 1,
     },
   },
-  {
-    path: '/SetNativeProps',
-    name: 'setNativeProps能力',
-    component: PAGE_LIST.SetNativeProps,
-    meta: {
-      style: 1,
-    },
-  },
   {
     path: '/WebSocket',
     name: 'WebSocket 模块',
@@ -171,4 +163,12 @@ export default [
       style: 2,
     },
   },
+  {
+    path: '/SetNativeProps',
+    name: 'setNativeProps能力',
+    component: PAGE_LIST.SetNativeProps,
+    meta: {
+      style: 2,
+    },
+  },
 ];
diff --git a/examples/hippy-vue-demo/src/components/demos/demo-set-native-props.vue b/examples/hippy-vue-demo/src/components/demos/demo-set-native-props.vue
@@ -40,7 +40,9 @@ export default {
       /* eslint-disable-next-line no-console */
       console.log('touchmove x', position, this.screenWidth);
       this.demon1Point.setNativeProps({
-        left: position,
+        style: {
+          left: position,
+        },
       });
     },
     onTouchDown2(evt) {

diff --git a/examples/hippy-vue-demo/src/components/demos/index.js b/examples/hippy-vue-demo/src/components/demos/index.js
@@ -8,7 +8,6 @@ import demoTextarea from './demo-textarea.vue';
 import demoList from './demo-list.vue';
 import demoIFrame from './demo-iframe.vue';
 import demoWebSocket from './demo-websocket.vue';
-import demoSetNativeProps from './demo-set-native-props.vue';
 
 const demos = {
   demoDiv: {
@@ -51,10 +50,6 @@ const demos = {
     name: 'WebSocket',
     component: demoWebSocket,
   },
-  demoSetNativeProps: {
-    name: 'setNativeProps',
-    component: demoSetNativeProps,
-  },
 };
 
 export default demos;
diff --git a/examples/hippy-vue-demo/src/components/native-demos/index.js b/examples/hippy-vue-demo/src/components/native-demos/index.js
@@ -5,6 +5,7 @@ import demoDialog from './demo-dialog.vue';
 import demoSwiper from './demo-swiper.vue';
 import demoPullHeader from './demo-pull-header.vue';
 import demoPullFooter from './demo-pull-footer.vue';
+import demoSetNativeProps from '../demos/demo-set-native-props.vue';
 
 const demos = {};
 
@@ -34,6 +35,10 @@ if (Vue.Native) {
       name: 'pull-footer 上拉组件',
       component: demoPullFooter,
     },
+    demoSetNativeProps: {
+      name: 'setNativeProps',
+      component: demoSetNativeProps,
+    },
   });
 }