当它的位置是绝对的时，onPress 事件在动画视图中不起作用

Question

我正在定制 header。当我给组件样式 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 屏幕组件的最后一个 child 位置。否则，占据屏幕其余部分的视图将成为触摸的响应者。

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

在DOM中，另一个组件之后的组件放在"above"中。因此，如果您这样做，您的 header 将位于实际屏幕内容视图之上，因此在按下时成为响应者。

当它的位置是绝对的时，onPress 事件在动画视图中不起作用

onPress event not working inside the Animated View when it's position is absolute

react-native

react-native-android