React-Navigation：無法使用嵌套導航器隱藏標頭

Question

我正在使用官方的反應導航來處理我的導航。 我有一個主要的TabNavigator用於整個應用程序，有兩個選項卡（下面稱為HitchhikingMapNavigator和SettingsNavigator ），每個選項卡都有一個嵌套的StackNavigator：

const HitchhikingMapNavigator = StackNavigator({
  hitchhikingMap: { screen: HitchhikingMapViewContainer },
  spotDetails: { screen: SpotDetailsViewContainer }
}, {
  navigationOptions: {
    header: {
      visible: false
    }
  }
});

const SettingsNavigator = StackNavigator({
  // some other routes
});

export default AppNavigator = TabNavigator({
  hitchhikingMap: { screen: HitchhikingMapNavigator },
  settings: { screen: SettingsNavigator }
}, {
  navigationOptions: {
    header: {
      visible: false,
    },
 },
});

正如您所看到的，即使在我的HitchhikingMapViewContainer視圖中，我也將標題的可見性設置為虛假：

class HitchhikingMapView extends React.Component {

  static navigationOptions = {
    title: 'Map',
    header: {
      visible: false,
    },
    //...other options
  }

然而，標題欄仍然可見：

如果我沒有嵌套導航器（即，如果我放置此代碼，跳過嵌套導航器）：

export default AppNavigator = TabNavigator({
  hitchhikingMap: { screen: HitchhikingMapViewContainer },
  settings: { screen: SettingsNavigator }
});

然后標題被正確隱藏。

所以結論：當我有兩個嵌套的導航器時，我無法使標題不可見。 有任何想法嗎？

Answer 1

對於那些仍在尋找答案的人，我會在這里發布。

兩個解決方案：

第一個解決方案：在StackNavigator中使用headerMode: 'none' 。 這將刪除StackNavigator中所有屏幕的標題

第二個解決方案：在StackNavigator中使用headerMode: 'screen' ，並在要隱藏標題的屏幕的navigationOptions中添加header: { visible: false } 。

更多信息可以在這里找到： https ： //reactnavigation.org/docs/en/stack-navigator.html

Answer 2

從v1.0.0-beta.9 ，使用以下內容，

static navigationOptions = {
    header: null
}

Answer 3

這對我有用：

headerMode: 'none'

Answer 4

我在“react-navigation”中遇到了同樣的問題：“^ 3.0.9”。 請問有什么解決方案？

我的代碼：

    const MontanteStack = createStackNavigator(
    {
        Montante: {
            screen: MontanteTab,
            navigationOptions: ({navigation}) => ({
                header: null,
            }),
        },
        PronosticsDetails: {
            screen: PronosticsDetailsScreen,
            navigationOptions: ({navigation}) => ({
                headerMode: 'screen',
                headerTitle: 'Pronostics détails',
                headerStyle: {
                    backgroundColor: '#000000',
                    textAlign: 'center',
                },
                headerTintColor: '#ffffff',
                headerTitleStyle: {
                    color: '#c7943e',
                    textAlign: 'center',
                    alignSelf: 'center',
                    justifyContent: 'center',
                    flex: 1,
                }
            }),
        },
    },
    {
        initialRouteName: 'Montante',
    }
);

export default createAppContainer(MontanteStack);

我想隱藏頂部欄和標簽，因為它們顯示在PronosticsDetailsS​​creen的標題上方

Answer 5

這對我來說，我在反應原生版本0.45的android方面工作

static navigationOptions = {
    header: null
}

Answer 6

這對我隱藏導航很有用：

static navigationOptions = {
    header: null
 };