一些可触摸的不透明度有效，而其他不在React Native Animated View中

Question

在滚动时旧的标题崩溃后，我试图显示一个新的标题。旧标题中的按钮工作正常。但是，新标题上的按钮根本不可点击。

我已经尝试了旧的堆栈溢出解决方案来为Animated.View创建一个类。但是，它根本不起作用。

<Animated.View style={[styles.header, {height: headerHeight}]}>

        <Animated.View style={[styles.mainHeader, {opacity: headerOpacity}]}>
          <TouchableOpacity onPress={this.goBack} style={{marginTop: 6, height: 25, width: 25}}>
            <Image style={{height: 18, width: 18, tintColor: StyleConstants.pallete.white}} source={require('../assets/images/icon-back.png')} />
          </TouchableOpacity>

          <AppText size = '24' bold color='white' > {parent_bucket.bucket_name} </AppText>

          {this.renderBucketSetting()}
        </Animated.View>

        <Animated.View  style={[styles.backgroundImage, {opacity: imageOpacity, transform: [{translateY: imageTranslate}]}]}>
          <Image style={styles.backgroundImage} source={{uri : parent_bucket.cover_image}} />

            <View style={styles.coverOverlayContainer}>
              <Faded height={HEIGHT/5} color="#000000" direction="bottom">
                <View style={{ paddingHorizontal: 20,  paddingVertical: 35, flexDirection: 'row', justifyContent: 'space-between' }}>
                  <TouchableOpacity onPress={this.goBack} style={{height: 25, width: 25}}>
                    <Image style={{height: 18, width: 18, tintColor: StyleConstants.pallete.white}} source={require('../assets/images/icon-back.png')} />
                  </TouchableOpacity>
                </View>
              </Faded>
              <Faded height={HEIGHT/5} color="#000000">
                <View style={{ paddingHorizontal: 5, paddingVertical: 20, flexDirection: 'row', justifyContent: 'space-between' }}>
                  <AppText size = '24' bold color='white' > {parent_bucket.bucket_name} </AppText>
                  {this.renderBucketSetting()}
                </View>
              </Faded>
            </View>
        </Animated.View>

        </Animated.View>

renderBucketSetting returns

      <BucketSettingsView
        toggleView = {this.toggleView}
        toggleDeleteAlert = {this.toggleDeleteAlert}
        reminder_type = {this.state.reminder_type}
        setMenuRef = {this.setMenuRef}
        showMenu = {this.showMenu}
        menuShare = {this.menuShare}
        menuArchive = {this.menuArchive}
        menuDelete = {this.menuDelete}
        menuEditReminders = {this.menuEditReminders}
      />

Styles

header: {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  backgroundColor: "black",
  overflow: 'hidden',
},
scrollViewContent: {
  marginTop: HEADER_MAX_HEIGHT,
},
backgroundImage: {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  width: null,
  height: HEADER_MAX_HEIGHT,
  resizeMode: 'cover',
},
mainHeader: {
  flex:1,
  flexDirection: "row",
  justifyContent:"space-between",
  marginLeft: 20,
  marginTop:30
}

  const headerHeight = this.state.scrollY.interpolate({
    inputRange: [0, HEADER_SCROLL_DISTANCE],
    outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
    extrapolate: 'clamp',
    });

    const imageOpacity = this.state.scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [1, 1, 0],
      extrapolate: 'clamp',
    });

    const headerOpacity = this.state.scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 0, 1],
      extrapolate: 'clamp',
    });

    const imageTranslate = this.state.scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [0, -50],
      extrapolate: 'clamp',
    });

预期结果：两个动画视图上的按钮都应该有效。

实际结果：第一个Animated.View上的按钮（由this.renderBucketSetting（）呈现）不可单击。但是，第二个Animated.View上的按钮（也由this.renderBucketSetting（）呈现）工作正常。但是，如果我切换两个Animated.View的位置，结果反之亦然（旧标题按钮不起作用，新标题按钮工作）。

Answer 1

可能是因为你使用绝对位置时，一个视图高于另一个视图并取消触摸。

如果你真的想解决这个问题，它需要使用PanResponder并手动处理这些触摸：https://facebook.github.io/react-native/docs/panresponder

您需要为每个视图添加一个平移响应器，并将触摸传递给另一个视图。我必须说实话，我在试图想象你想要达到的目标时遇到问题所以我可以给你一个更好的答案。

干杯