Событие onPress не работает внутри Анимированного представления, когда его позиция абсолютна - PullRequest
Новая
       4

Событие onPress не работает внутри Анимированного представления, когда его позиция абсолютна

0 голосов
/ 13 марта 2020

Я создаю собственный заголовок. Событие onPress компонента touchable opacity не работает, когда я задаю для компонента стиль prop - 'position: "absolute"'. Но это прекрасно работает, когда я комментирую свойство style - position. Я не мог найти решение для этого в другом месте. Пожалуйста, помогите. 

<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>;

Ответы [ 2 ]

1 голос
/ 13 марта 2020

это работает для моего случая оформить заказ ниже код: или проверить мой пример закуски: 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>
    );
  }
}
0 голосов
/ 13 марта 2020

Вы должны поместить 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 компонент, который следует за другим компонентом, помещается «над» ним. Таким образом, если вы сделаете это, ваш заголовок будет выше фактического представления содержимого экрана и, следовательно, станет ответчиком при нажатии.

...