反应原生布局 ScrollView over View答案

【问题标题】：React native layouts ScrollView over View反应原生布局 ScrollView over View
【发布时间】：2019-03-08 02:56:41
【问题描述】：

这是一个两个可点击的按钮 - “关闭”和“星号”。 '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,
  },
}

【问题讨论】：

标签： css react-native layout

【解决方案1】：

尽量不要放zIndex:-1也许试试这个：

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

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

【讨论】：