在堆棧導航器中隱藏標題反應導航

我想切換使用堆棧和標籤導航器的屏幕。在堆棧導航器中隱藏標題反應導航

const MainNavigation = StackNavigator({ 
     otp: { screen: OTPlogin }, 
     otpverify: { screen: OTPverification}, 
     userVerified: { 
     screen: TabNavigator({ 
      List: { screen: List }, 
      Settings: { screen: Settings } 
     }), 
     }, 
    });

在這種情況下，首先使用stacknavigator，然後使用tabnavigator。我想隱藏堆棧導航器的標題。機智工作不正常時，我使用像::

navigationOptions: { header: { visible: false } }

我試圖在其上使用stacknavigator前兩個部分的代碼navigationoptions。如果我使用此行然後收到的一些錯誤等::

來源

2017-06-22 Avijit Dutta

我使用它來隱藏堆棧條（注意這是第二個PARAM的值）：

{ 
    headerMode: 'none', 
    navigationOptions: { 
     headerVisible: false, 
    } 
}

當你使用這種方法將會隱藏在所有屏幕上。

在你的情況下，它看起來就像這樣：

const MainNavigation = StackNavigator({ 
    otp: { screen: OTPlogin }, 
    otpverify: { screen: OTPverification }, 
    userVerified: { 
    screen: TabNavigator({ 
    List: { screen: List }, 
    Settings: { screen: Settings } 
    }), 
} 
}, 
{ 
    headerMode: 'none', 
    navigationOptions: { 
    headerVisible: false, 
    } 
} 
);

來源

2017-06-22 13:49:58 Perry

可以正常使用！感謝您的答案，但我有一個問題後，添加這是::切換stacknavigator tabnavigator其工作正常。如果我想顯示標題，當我切換屏幕從tabnavigator到stacknaviagtor我該怎麼辦？ –

嗯，這是一個很好的問題。說實話，我不知道。你可以在你想要顯示的屏幕上試試@Dpkstr答案，而不是null，這將是真實的。 – Perry

嗯，我已經試過這個，但它也沒有工作......謝謝你的第一個答案。我現在只用一個按鈕來完成第二個功能。 –

在頁面只需使用下面的代碼要隱藏標題

export default class Login extends Component { 
    static navigationOptions = { 
     header: null 
    } 
}

指Stack Navigator

來源

2017-06-22 13:52:19 Dpkstr

這很好，但一個問題是，當屏幕從stacknavigator切換到tabNavigator（根據我提到的問題組件如OTP驗證屏幕，當時列出屏幕上的兩個標題都顯示 –

你能告訴我你到底是如何導航到列表 – Dpkstr

這一個工作對我來說 –

只需添加這進入你的班級/組件代碼片段並且標題將被隱藏

static navigationOptions = { header: null }

來源

2017-11-18 15:13:44

感謝爲我工作 – SANTOSH

如果你想隱藏特定的屏幕上比這樣做：

// create a component 
export default class Login extends Component<{}> { 
    static navigationOptions = { header: null }; 
}

來源

2018-02-21 06:35:01

在堆棧導航器中隱藏標題反應導航

回答

相關問題