Reactjs React Native：如何按onPress与动画的子按钮交互。查看父按钮？

我已经尝试解决这个问题很多年了，我以前在这里发布过，并且从我访问过/看过的其他地方获得了通用复制粘贴。我已经剥离了组件，除了手势和渲染外，什么都没有。我真的不明白这是怎么回事

有一个

动画视图

。它有一个子

TouchableOpacity

我可以用平移手势移动

动画。查看

当我按下

TouchableOpacity

时，我（很小）随机从

onPress

console.log（）获得响应

我还缺什么吗？我需要在每次按下按钮时登录到控制台，而不是5%的时间。这是不可靠的

建议？建议？这不是在React native中可以实现的吗

import React, { Component } from "react";
import styled from "styled-components";
import {
  Text,
  View,
  Animated,
  TouchableOpacity,
  PanResponder
} from "react-native";

export default class TestComponent extends Component {
  state = {
    pan: new Animated.ValueXY()
  };

  componentWillMount() {
    this._panResponder = PanResponder.create({
      onMoveShouldSetPanResponder: () => true,

      onPanResponderMove: Animated.event([
        null,
        { dx: this.state.pan.x, dy: this.state.pan.y }
      ]),

      onPanResponderRelease: () => {
        const positionY = this.state.pan.y.__getValue();
        if (positionY > 200) {
          Animated.timing(this.state.pan, {
            toValue: { x: 0, y: 1000 }
          }).start(() => {
            this.state.pan.setValue({ x: 0, y: 0 });
          });
        } else {
          Animated.spring(this.state.pan, {
            toValue: { x: 0, y: 0 }
          }).start();
        }
      }
    });
  }

  sayHello = () => {
    console.log("hello");
  };

  render() {
    return (
      <Animated.View
        style={[
          { height: 150, width: 150, borderWidth: 2, borderColor: "orange" },
          {
            transform: [
              { translateX: this.state.pan.x },
              { translateY: this.state.pan.y }
            ]
          }
        ]}
        {...this._panResponder.panHandlers}
      >
        <TouchableOpacity
          style={{ height: 100, width: 100, borderWidth: 2, borderColor: "red" }}
          onPress={() => console.log("hello?")}
        >
          <Text style={{ height: 50, width: 50, borderWidth: 2, borderColor: "blue" }}>
            Hello
          </Text>
        </TouchableOpacity>
      </Animated.View>
    );
  }
}

import React，{Component}来自“React”；
从“样式化组件”导入样式化；
进口{
文本，
看法
有生气的
可触摸不透明度，
应答器
}从“反应本族语”；
导出默认类TestComponent扩展组件{
状态={
平移：新的动画.ValueXY（）
};
组件willmount（）{
这是.\u panResponder=panResponder.create({
onMoveShouldSetPanResponder:（）=>true，
onPanResponderMove:Animated.event([
无效的
{dx:this.state.pan.x，dy:this.state.pan.y}
]),
onPanResponderRelease:（）=>{
const positionY=this.state.pan.y.\uu getValue（）；
如果（位置Y>200）{
动画。计时（this.state.pan{
toValue:{x:0，y:1000}
}).start（（）=>{
this.state.pan.setValue（{x:0，y:0}）；
});
}否则{
动画.spring（this.state.pan{
toValue:{x:0，y:0}
}).start（）；
}
}
});
}
说你好=（）=>{
console.log（“你好”）；
};
render（）{
返回(
console.log（“你好？”）}
>
你好
);
}
}

console.log（“你好？”）}
>
你好
);

}

console.log（“你好？”）}
>
你好
);

---

}

我不知道这是如何回答问题的。我不知道这是如何回答问题的。

  <Animated.View
    style={[
      { height: 150, width: 150, borderWidth: 2, borderColor: "orange" },
      {            transform: [
          { translateX: this.state.pan.x },
          { translateY: this.state.pan.y }
        ]
      }
    ]}
    {...this._panResponder.panHandlers}
  >
    <TouchableOpacity
      style={{flex : 1, borderWidth: 2, borderColor: "red" }}
      onPress={() => console.log("hello?")}
    >
      <Text style={{ height: 50, width: 50, borderWidth: 2, borderColor: "blue" }}>
        Hello
      </Text>
    </TouchableOpacity>
  </Animated.View>
);