Question

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

我有一个组件

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

复制＆amp;粘贴于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

Answer 2

执行此类操作的方法是从其上方的组件传递道具。

如果在Comp2中你将prop传递给Comp1，例如hiddenBool。您可以将该值设置为Comp2中您希望它为true / false的值。然后当道具到达Comp1并尝试渲染状态栏时，它将传递该道具，而不是总是传递真。

与onClick函数相同，使onClick将prop设置为false / true，这将更新您的组件。

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

2 个答案: