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

Posted 2023-03-15

【中文标题】当位置为绝对时，onPress 事件在动画视图中不起作用

【英文标题】：onPress event not working inside the Animated View when it's position is absolute

【发布时间】：2020-03-13 06:36:27

【问题描述】：

我正在构建一个自定义标题。当我给组件样式 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>;

【参考方案1】：

您应该将absolutely 定位为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 中，位于另一个组件之后的组件被放置在它的“上方”。因此，如果您这样做，您的标题将位于实际屏幕内容视图的上方，因此在按下时成为响应者。

【讨论】：

谢谢。但这无济于事。上面的代码是我在 StackNavigator 中使用的自定义标头组件。

您可以只提供导航器选项headerShown: false，而是将标题组件放在屏幕组件的末尾。

【参考方案2】：

它在下面的代码中处理我的案例结帐： 或查看我的零食示例：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>
    );