css - 在 View 上 react native 布局 ScrollView

Question

这是一个可点击两次的按钮——“关闭”和“星标”。 “星号”应该被 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 放在具有绝对位置样式的 View 中，TouchableOpacity 的绝对位置很奇怪