ScrollView内stickyHeaderIndices组建中包含absolute的TouchableOpacity,onPress属性没有作用



  • 项目中搜索页面组建需要添加一个筛选栏,需要让筛选栏贴在顶端,所以使用了ScrollView的stickyHeaderIndices属性来实现,筛选栏中有一个可点开的menu, 并且点击menu以外内容(遮罩层)会关闭menu,所以用了position:absolute + TouchableOpacity来实现,但是发现absolute出去后遮罩层的TouchableOpacity和TouchableOpacity.children的onPress属性都不起作用了,希望dalao可以帮忙找一下问题

    {
                showHistory
                  ? <History {...historyProps} />
                  : <ScrollView stickyHeaderIndices={[0]}>
                    {/* filter渲染 */}
                    {this._renderFilter()}
    
                    {/* results渲染 */}
                    {
                      results.length !== 0
                        ? (
                          <View>
                            {results.map((item, index) => renderResultItem(item, index))}
                            <Text style={styles.noMoreText}>没有更多了~</Text>
                          </View>
                        )
                        : (
                          <View style={styles.noDataLayout}>
                            <Image style={styles.noDataImg} source={require('./images/noData.png')} />
                            <Text style={styles.noDataText}>{noDataText}</Text>
                          </View>
                        )
                    }
                  </ScrollView>
    
              }
    
    _renderFilter = () => {
        const { tabs = [], pops = [] } = this.props.filter
        const { filter, popsOpen } = this.state
    
        if (!tabs.length && !pops.length) return
    
        return (
          <View style={styles.filterLayout}>
    
            {/* tab形filter */}
            {
              tabs.length ? this._renderTabs(tabs) : null
            }
    
            {/* pop形filter btn */}
            {
              pops.length ? (
                <TouchableOpacity
                  activeOpacity={1}
                  style={[
                    styles.popsBtn,
                    tabs.length ? {
                      width: '20%',
                      borderLeftWidth: scaleSize(1),
                      borderLeftColor: '#EEEFF5',
                    } : { flex: 1 },
                  ]}
                  onPress={() => this.setState({ popsOpen: !popsOpen })}
                >
                  <Image
                    style={styles.arrowImage}
                    source={
                      popsOpen
                        ? require('./images/arrow_down.png')
                        : require('./images/arrow_up.png')
                    }
                  />
                  <Text style={[
                    styles.popsBtnText,
                    popsOpen ? { color: '#4480F7' } : {}
                  ]}>{pops[0] !== filter[1] ? filter[1] : '筛选'}</Text>
                </TouchableOpacity>
              ) : null
            }
    
            {/* pops弹窗 */}
            {
              popsOpen ? (
                <TouchableOpacity
                  activeOpacity={1}
                  style={styles.popsLayout}
                  onPress={() => this.setState({ popsOpen: false })}
                >
                  {
                    pops.map((item, index) => (
                      <TouchableOpacity
                        key={index}
                        style={{ width: '100%', height: '10%', backgroundColor: 'red' }}
                        onPress={() => console.log('print me')}
                      >
                        <Text>{item}</Text>
                      </TouchableOpacity>
                    ))
                  }
                </TouchableOpacity>
              ) : null
            }
    
          </View>
        )
      }
    


  • 弹出层样式

        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        position: 'absolute',
        top: scaleSize(88),
        height,
        width,
      },