React本地布局scrollview浏览视图

Question

这是一个两个单击的按钮 - 'CLOSS'和'Star'。"星"应该被滚动视图隐藏。问题是，当我为"星形"按钮制作'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的位置很奇怪，位置绝对