React native onStateChange没有'；当封装在React.Component中时，不会被调用

我正在尝试将NavigationContainer封装在React组件中以进行屏幕跟踪，这种方法在V4中运行良好，但不幸的是在V5中失败。接下来的问题是：是否可以将它包装在函数组件中而不是react组件中，以便能够使用钩子？（必须承认我相对来说还没有反应过来） 非常感谢您的帮助

App.js

const Drawer=createDrawerNavigator（）；
函数MyDrawer（）{
返回(
);
}
const AppContainer=函数App（）{
返回{MyDrawer（）}；
}
使用（AppContainer）导出默认值；

包装器.tsx

导出功能（组件：任意）{
类PNDContainer扩展React.Component{
去盎司；
componentDidMount（）{
console.log（'PND安装-第一次屏幕'）；
}
componentWillUnmount（）{}
render（）{
报税表（{
log（'屏幕更改不会被调用！！！'）；
}} />);
}
}
返回PND容器；
}

预期行为

• 应该调用onStateChange，在V4中，相同的方法触发了onNavigationStateChange
  

环境
@react导航/native 5.7.0
反应本机0.61.5
节点13.10.1
纱线1.22.1

我可以理解为什么它不起作用，因为我在V4 CreateAppContainer中传递了一个没有此类prop-onStateChange的函数元素，返回了一个具有prop-onNavigationStateChange的组件
所以我想调用函数get the element并“注入”我的onStateChange实现，但我认为react不能以这种方式工作（更像是命令式方式，react是一个声明性框架），那么有什么更好的方法呢？
因此，我尝试在chrome中调试，以查看onStateChange，运气不好…
我想我误解了这些概念，我读了以下内容

编辑
目前唯一对我有效的解决方案是将我的组件包装在NavigationContainer中并返回它

<NavigationContainer onStateChange={() => {console.log('ProbablynewScreen');}}>{Component()}
  </NavigationContainer>);

{console.log（'ProbablynewScreen'）；}}>{Component（）}
);

在这种情况下，我注意到发现抽屉并不是那么简单，抽屉的状态没有任何线索，如果我使用类组件（不幸的是，目前我必须）我没有挂钩，那么如何发现抽屉打开/关闭？

App.js

const Drawer=createDrawerNavigator（）；
功能MyDrawer（道具）{
返回(
)
};
使用（MyDrawer）导出默认值

使用.tsx

导出功能（组件：任意）{
类PNDContainer扩展React.Component{
儿童：任何；
componentDidMount（）{
//调试器；
console.log（'PND安装-第一次屏幕'）；
}
componentWillUnmount（）{}
render（）{
调试器；
报税表（{
调试器；
console.log（“屏幕更改”）；
}} />)
}
}
返回PND容器；
}

感谢WhiteBear

App.js

const Drawer=createDrawerNavigator（）；
功能MyDrawer（道具）{
返回(
)
};
使用（MyDrawer）导出默认值

使用.tsx

导出功能（组件：任意）{
类PNDContainer扩展React.Component{
儿童：任何；
componentDidMount（）{
//调试器；
console.log（'PND安装-第一次屏幕'）；
}
componentWillUnmount（）{}
render（）{
调试器；
报税表（{
调试器；
console.log（“屏幕更改”）；
}} />)
}
}
返回PND容器；
}

---

多亏了白熊

为什么投票失败？如果我的问题不够好/清楚，请纠正我，我会编辑它。为什么否决？如果我的问题不够好/清楚，请纠正我，我会编辑它

export function with(Component: any) {
        class PNDContainer extends React.Component {
        debounce;
        componentDidMount() {
            console.log('PND Mounted - First Time Screen');
        }
       componentWillUnmount() { }
       render() {
            return (<Component onStateChange={() => {
                console.log('Screen Changed Doesnt get Called !!!');
            }} />);
        }
    }
    return PNDContainer;
}

<NavigationContainer onStateChange={() => {console.log('ProbablynewScreen');}}>{Component()}
  </NavigationContainer>);

const Drawer = createDrawerNavigator();
function MyDrawer(props) {
  return (
    <NavigationContainer onStateChange={props.onStateChange}>
      <Drawer.Navigator drawerType="front" drawerPosition="left">
        <Drawer.Screen name="Properties" component={PropertiesTabs} />
        <Drawer.Screen name="Profile" component={Profile} />
      </Drawer.Navigator>
    </NavigationContainer>
  )
};
export default with(MyDrawer)

export function with(Component: any) {
    class PNDContainer extends React.Component {
        child: any;
        componentDidMount() {
            //debugger;
            console.log('PND Mounted - First Time Screen');
        }
        componentWillUnmount() { }
        render() {
            debugger;
            return (<Component onStateChange={(state) => {
                debugger;
                console.log('Screen Changed');
            }} />)
        }
    }
    return PNDContainer;
}