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并手动处理触摸：http://alexrdzv2.herokuapp.com/index.html

您需要为每个视图添加一个平移响应器，并将触摸传递给另一个。老实说，我在尝试想象您要实现的目标时遇到了问题，因此我可以给您一个更好的答案。

欢呼

一些可触摸的不透明度有效，而另一些则不在React Native Animated View内

1 个答案: