Question

我想知道何时在 onStateChange 上打开/关闭抽屉（在V4中我可以从状态中获取它，但是在V5中我找不到此信息）。或任何其他想法，只要我坚持使用组件上下文

App.js

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)

With.tsx

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

我知道可以使用功能组件来实现（但这不是我所需要的）。我遵循了几个没有运气的示例How to Use React Hooks in Class Components

Answer 1

onStateChange={(state) => {
  const isDrawerOpen = state.history.some((it) => it.type === 'drawer');
}

另一种选择是使用光纤节点树找到 DraverView 类型并检查其是否打开

如何在react-navigation中了解react组件onStateChange V5内部的抽屉状态

1 个答案: