当空节点优化失效后，页面节点顺序发生了变化

[linjinze999]

期望结果

节点层级一致

实际结果

为Image节点添加transform属性后，Image会覆盖在里面的Text后面

重现链接

No response

重现步骤

替换Image组件代码：driver/js/examples/hippy-react-demo/src/components/Image/index.jsx

import { Image, StyleSheet, Text, View, ScrollView } from '@hippy/react'
import React, { useRef, useState } from 'react'

const styles = StyleSheet.create({
  eachPocket: {
    width: (100),
    height: (121),
    marginHorizontal: (5),
  },
  eachPocket2: {
    width: (100),
    height: (121),
    marginHorizontal: (5),
    transform: [{translateX: 10}],
  },
  pocketNum: {
    fontSize: (26),
    color: 'rgba(0, 0, 0, 1)',
    alignSelf: 'center',
    marginTop: (30),
  },
})

function RedPocketShaking() {
  const ImageRef = useRef(null)
  const [styleIdx, setStyleIdx] = useState(0)
  const imageStyleList = [styles.eachPocket, styles.eachPocket2];

  return (
    <ScrollView style={{marginTop: 10}}>
      <Image
        ref={ImageRef}
        source={{
          uri: 'https://user-images.githubusercontent.com/12878546/148736102-7cd9525b-aceb-41c6-a905-d3156219ef16.png',
        }}
        style={imageStyleList[styleIdx % imageStyleList.length]}
      >
        <Text
          style={[
            styles.pocketNum,
          ]}
        >
          {'测试'}
        </Text>
      </Image>
      <View
        style={{ height: 100, backgroundColor: 'red' }}
        onClick={() => {
          setStyleIdx(styleIdx + 1)
        }}
      >
        点击触发bug
      </View>
    </ScrollView>
  )
}

export default RedPocketShaking

重现环境

No response

补充说明

No response