无法在 Animated.View 上使用 onPress() 事件设置为位置：绝对 - React Native

Question

我为公司开发的应用制作了一个可滚动的 header。当我尝试使用 TouchableHighlight 触发 onPress() 事件时，它没有注册，因为位置键设置为 'absolute':

我在网上搜索了几个小时后尝试了以下方法：

-提高zIndex/elevation - 确保 TouchableHighlight 是从 'react-native' 导入的 -来自 'react-native-reanimated'

的动画库

当我注释掉主要 header 中的 position:absolute 时，它工作得很好，但是 header 在它向上滚动时留下了一个我无法查看的视图顶部.

我运行在这里没有选择...任何帮助将不胜感激！

     <Animated.View style={globalStyles.tabNavbar}>
          <TouchableHighlight
              style={{backgroundColor: 'white', height: 50, width: 100, zIndex: 99999, elevation: 99999}}
              underlayColor="#eee"
              onPress={() => {
                  console.log('PLZ WORK');
                  this.updateTabs('projectsTab');
          }}  >
              <Animated.View style={{ alignItems: 'center'}}>
                  <Text  onPress={() => { this.updateTabs('projectsTab');}} style={{fontWeight: 'bold'}}>Close</Text>
              </Animated.View>
          </TouchableHighlight>
          <TouchableHighlight
              style={{color: 'white'}}
              underlayColor="#eee"
              onPress={() => {
                  console.log('PLZ WORK');
                  this.updateTabs('notificationTab');
          }}  >
              <View style={{alignItems: 'center'}}>
                  <Text style={{fontWeight: 'bold'}}>Close</Text>
              </View>
          </TouchableHighlight>
      </Animated.View>

Answer 1

对于那些想知道的人，如果您将组件的视图顺序更改为具有 position: absolute 的组件在最后，按钮将起作用。在这种情况下，我不得不将我的 header 放在最后，即使它出现在我的屏幕顶部。

无法在 Animated.View 上使用 onPress() 事件设置为位置：绝对 - React Native

Cant Use onPress() Events on Animated.View set to Position: Absolute - React Native

react-native

css-position

touchableopacity

react-native-reanimated

touchablehighlight