Animated 做动画 父级无法遮盖住子级 求解



  • 先上图

    正常需求长成这样:

    0_1537522453000_76179700-369a-41af-8301-ffc8edcd572a-image.png

    实际是这样子:

    0_1537522486526_91e16306-8963-4fcf-930c-9b262838278e-image.png

    需求: 希望页面card左右滚动, 上面标题跟随上下滚动.

    .

    做法: 我的布局思路, 大概就是外面一层View只有显示一个标题的高度, 里面套一个Animated.View是包含所有标题的高度.

    .

    问题: 我给了外层View宽高, 但是里面的Animated.View就会向图2一样, 遮盖不住显示出来

    .

    奇怪的地方: 我给了外层View一个border或者backgroundColor, 就可以像图1一样正常显示.

    .

    希望有大神能给解答一下这个奇怪的地方是为什么?

    .

    代码:

          <View style={{
              ...styles.swiperTitle,
              width: swiperTitleWidth,
              height: swiperTitleHeight
            }} >
              <Animated.View
                shouldRasterizeIOS={true}
                renderToHardwareTextureAndroid={true}
                style={{
                  transform: [{
                    translateY: translateX.interpolate({
                      inputRange: [-moveLeft * sIndex, -moveLeft * (sIndex - 1)],
                      outputRange: [-moveTop * sIndex, -moveTop * (sIndex - 1)],
                    })
                  }]
                }} >
              {
                imgArr.map((item, index) => {
                  return <View
                    key={index}
                    style={{
                      height: swiperTitleHeight + swiperTitleNull
                    }} >
                    <Text style={styles.title}>{item.title}</Text>
                    <Text style={styles.description}>{item.description}</Text>
                    <View style={{height: swiperTitleNull}} />
                  </View>
                })
              }
              </Animated.View>
            </View>
    
    swiperTitle: {
        flex: 0,
        backgroundColor: 'transparent',
        marginLeft: scaleSize(70),
        marginTop: scaleSize(100)
      },
      title: {
        fontSize: scaleSize(70),
        lineHeight: scaleSize(80)
      },
      description: {
        fontSize: scaleSize(40),
        lineHeight: scaleSize(40)
      },
    


  • style={{
    overflow: "hidden"
    }}



  • @canyara overflow只对Ios有效 安卓不行