ドロアが開いているときにネイティブの状態バーを非表示にします

Question

を開いたときに、特定のコンポーネントでのみStatusBarを非表示にする方法はありますか？今、それはどこにでも隠されています。

Iは成分Iの別のコンポーネントreact navigationに取り付けられている

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

に実装

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

を有します。

このようにすると、StatusBarはすべての画面で非表示になります。何かがクリックされたときにStatusBarを隠す方法はありますか？または、コンポーネントで別に実装する必要がありますか。

Answer 1

コピー&はufxmengをufxmengから貼り付けと少しを編集します。https：：//facebook.github

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の場合は、たとえばhiddenBoolのようにComp1に小道具を渡します。 Comp2では、その値を真/偽にしたい値に設定できます。次に、小道具がComp1に到達し、ステータスバーをレンダリングしようとすると、常に真実を伝えるのではなく、その小道を通過します。

onClick関数と同じですが、onClickをfalse/trueに設定すると、コンポーネントが更新されます。