onPress事件在动画视图中处于绝对位置时不起作用

Question

我正在构建自定义标题。当我给组件样式属性prop-'position：“ absolute”'时，可触摸不透明组件的onPress事件不起作用。但是，当我对样式属性-位置进行评论时，它可以完美地工作。我在其他地方找不到解决方案。请帮助。

<Animated.View
  style={{
    elevation:
      params !== undefined && params.elevation !== undefined
        ? params.elevation
        : null,
    position: "absolute",
    top: 0,
    left: 0,
    backgroundColor:
      params !== undefined && params.headerBgColor !== undefined
        ? params.headerBgColor
        : "red",
    width: "100%",
    height:
      params !== undefined && params.changingHeight !== undefined
        ? params.changingHeight
        : 50,
    justifyContent: "space-between",
    alignItems: "center",
    flexDirection: "row",
    paddingHorizontal: 20
  }}
>
  <TouchableOpacity style={{}} onPress={() => console.log("hello")}>
    <View style={{}}>
      <Image
        style={styles.menuIcon}
        source={require("../../assets/images/Menu-512.png")}
      />
    </View>
  </TouchableOpacity>
  <TouchableOpacity onPress={() => console.log("image")}>
    <View style={{}}>
      <Image
        style={styles.profImage}
        source={require("../../assets/images/user.png")}
      />
    </View>
  </TouchableOpacity>
</Animated.View>;

Answer 1

其在我的案件结帐中的代码如下：或查看我的零食示例：https://snack.expo.io/@immynk/header_demo

您是否缺少提供条件的某些参数或条件检查为空，请确认它希望此答案对您有帮助

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Animated,
  TouchableOpacity,
  Image,
} from 'react-native';
import Constants from 'expo-constants';

export default class App extends React.Component {
  render() {
    return (
      <View>
        <Text>Hello this is demo of flexdirection of box color</Text>
        <Animated.View
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            backgroundColor: 'red',
            width: '100%',
            height: 50,
            justifyContent: 'space-between',
            alignItems: 'center',
            flexDirection: 'row',
            paddingHorizontal: 20,
          }}>
          <TouchableOpacity style={{}} onPress={() => alert("hello","hello")}>
            <View style={{}}>
              <Image
                source={{ uri: 'https://reactjs.org/logo-og.png' }}
                style={{ width: 50, height: 65 }}
              />
            </View>
          </TouchableOpacity>
           <TouchableOpacity style={{}} onPress={() => alert("hello","hello")}>
            <View style={{}}>
              <Image
                source={{ uri: 'https://reactjs.org/logo-og.png' }}
                style={{ width: 50, height: 65 }}
              />
            </View>
          </TouchableOpacity>
        </Animated.View>
      </View>
    );
  }
}

Answer 2

您应该将absolute放置为Animated.View作为屏幕组件中的最后一个子元素。否则，占据屏幕其余部分的视图将成为触摸的响应者。

const Screen = () => {
  return <View style={{ flex: 1}}>
           <View style={{flex: 1}}>
             //actual screen content
           </View>
           <Animated.View // header
             ...props
           ></Animated.View>
         </View>

在DOM中，另一个组件之后的组件被放置在它的上方。因此，如果您执行此操作，则标题将位于实际屏幕内容视图的上方，因此在被按下时成为响应者。