javascript - 打开抽屉时在 React Native 中隐藏 StatusBar

Question

有没有办法只在某些组件/打开 NavigationDrawer 时隐藏 StatusBar？现在，它无处不在。

我有一个组件

export default class Comp1 extends Component {
    ...
    render() {
        return (    
            <StatusBar hidden = {true} />
            ...
        )
    }
}

我将其实现到另一个组件中

export default class Comp2 extends Component {
    ...
    render() {
        return (    
            <Comp1 ... />
            ...
        )
    }
}

安装到 react navigation 中。

这样一来，StatusBar 就隐藏在所有屏幕上了。有没有办法在单击某些内容时隐藏 StatusBar？或者我必须在 Component 中以不同的方式实现它。

Answer 1

从ufxmeng复制粘贴ufxmeng并编辑了一点:

import {
  StatusBar,
} from "react-native";

const MyDrawerNavigator = DrawerNavigator({
    //...
});

const defaultGetStateForAction = MyDrawerNavigator.router.getStateForAction;

MyDrawerNavigator.router.getStateForAction = (action, state) => {
    if(state && action.type === 'Navigation/NAVIGATE' && action.routeName === 'DrawerClose') {
        StatusBar.setHidden(false);
    }

    if(state && action.type === 'Navigation/NAVIGATE' && action.routeName === 'DrawerOpen') {
        StatusBar.setHidden(true);
    }


    return defaultGetStateForAction(action, state);
};

请参阅此处 https://github.com/react-community/react-navigation/blob/673b9d2877d7e84fbfbe2928305ead7e51b04835/docs/api/routers/Routers.md在这里 https://github.com/aksonov/react-native-router-flux/issues/699