Question

这是两个可点击的按钮-“关闭”和“星标”。 “ Star”应由ScrollView隐藏。问题是，当我为“星形”按钮设置“ zIndex：-1”时，它变得不可单击。

为了说明清楚，这是10秒的视频： youtube

我也尝试了其他方法使其正常工作，但可以找到解决方案（

 render() {
    return (
      <View style={{ backgroundColor: 'tomato' }}>
        <Animated.ScrollView
          contentInset={{
            top: 450,
          }}
          contentOffset={{
            y: -HEADER_MAX_HEIGHT,
          }}
        >
          <ArticleText animation={{}} />
        </Animated.ScrollView>
        <View />
        <TouchableOpacity style={styles.closeButton}>
          <Icon
            onPress={() => console.log('pressed')}
            name='close'
            containerStyle={{ padding: 5, backgroundColor: '#4f4f4f',                 borderRadius: 40 }}
            color='#ffff'
            size={30}
          />
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.starIcon]}
          onPress={() => console.log('pressed')}
        >
          <Icon
            name='star'
            color='#808080'
            size={25}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

.... styles {
  starIcon: {
    position: 'absolute',
    zIndex: -1,
    top: 180,
    right: 20,
    backgroundColor: '#fff',
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  closeButton: {
    zIndex: 1,
    position: 'absolute',
    top: 30,
    right: 10,
    backgroundColor: 'black',
    width: 40,
    height: 40,
    borderRadius: 20,
  },
}

Answer 1

尝试不要放zIndex:-1，也许试试看：

closeButton: {zIndex:3}
ScroolView:{zIndex:2}
starIcon:{zIndex:1}

如果这不起作用，请尝试将TouchableOpacity放在位置绝对样式的视图中，将TouchableOpacity放在位置绝对样式奇怪的地方

在视图上反应本机布局ScrollView

1 个答案: