为何移除Text组件animated类代码正常，使用Animated API时子组件无法调用父组件方法

嘿，我之前也踩过类似的坑，来给你拆解下为啥会出现这个情况～

首先，你的代码里有个极易忽略的细节：子组件的构造函数没有接收并传递props给super！看你贴的代码片段：

class Txt extends React.Component {
 constructor() { // 这里没接收props参数
 super() // 也没把props传给super
 this.childButton = this.childButton.bind(this);
 }

当你用普通Text组件时，React可能在后续渲染阶段自动帮你补全了props绑定，所以父组件的函数还能勉强调用；但换成Animated.Text后，它本质是一个高阶组件（HOC），会严格按照组件定义传递props——你的构造函数没接收props，导致this.props在组件初始化时是undefined，自然拿不到父组件传递的回调函数。

第一步：修正子组件的构造函数 #

把构造函数改成下面这样，确保props被正确接收和传递：

class Txt extends React.Component {
 constructor(props) { // 接收props参数
 super(props); // 把props传给super
 this.childButton = this.childButton.bind(this);
 }

 // 子组件中调用父组件方法的示例
 childButton() {
   this.props.onChildPress(); // 对应父组件传递的回调函数
 }

 render() {
   return (
     <Animated.Text onPress={this.childButton}>
       {this.props.text}
     </Animated.Text>
   );
 }
}

第二步：确保父组件正确传递回调并绑定this #

在父组件中使用Txt时，要确保回调函数已经绑定了父组件的this，避免上下文丢失：

class ParentComponent extends React.Component {
 constructor(props) {
   super(props);
   this.parentFunction = this.parentFunction.bind(this); // 提前绑定this
 }

 parentFunction() {
   console.log("父组件的函数被调用啦！");
 }

 render() {
   return (
     <View>
       <Txt onChildPress={this.parentFunction} text="点击触发父组件函数"/>
     </View>
   );
 }
}

其他可能的排查点 #

如果上面的修改后还是有问题，可以检查这几点：

• 给子组件的childButton函数加个console.log，确认Animated.Text的onPress事件是否正常触发
• 不要在子组件中直接修改父组件状态，所有交互都通过回调函数传递数据
• 如果动画逻辑复杂，建议把动画值放在父组件中管理，再传递给子组件的Animated.Text

内容的提问来源于stack exchange，提问作者suchcodemuchwow