Header im Stack-Navigator ausblenden Reagieren Sie auf die Navigation

Ich versuche, den Bildschirm sowohl mit dem Stack- als auch mit dem Tab-Navigator zu wechseln.

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

In diesem Fall wird zuerst stacknavigator und dann tabnavigator verwendet. und ich möchte Header von Stack Navigator verstecken. Es funktioniert nicht richtig, wenn ich Navigationsoptionen wie :: verwende

navigationOptions: { header: { visible: false } }

Ich versuche diesen Code für die ersten beiden Komponenten, die in Stacknavigator verwendet werden. Wenn ich diese Zeile benutze, bekomme ich einen Fehler wie ::

UPDATE ab Version 5

Ab Version 5 ist dies die Option headerShowninscreenOptions

Anwendungsbeispiel:

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

Wenn Sie nur die Kopfzeile auf einem Bildschirm ausblenden möchten, können Sie dies tun, indem Sie die screenOptions auf der Bildschirmkomponente festlegen (siehe unten).

<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />

Siehe auch den Blog über Version 5

UPDATE
Ab Version 2.0.0-alpha.36 (07.11.2019)
gibt es eine neue NavigationOption:headershown

      navigationOptions: {
        headerShown: false,
      }

https://reactnavigation.org/docs/stack-navigator#headershown

https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

Alte Antwort

Ich benutze dies, um die Stapelleiste auszublenden (beachten Sie, dass dies der Wert des zweiten Parameters ist):

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

Wenn Sie diese Methode verwenden, wird sie auf allen Bildschirmen ausgeblendet.

In Ihrem Fall sieht es so aus:

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

Verwenden Sie einfach den folgenden Code auf der Seite, auf der Sie die Kopfzeile ausblenden möchten

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

Siehe Stack Navigator

Fügen Sie dies einfach Ihrem Klassen- / Komponentencode-Snippet hinzu, und der Header wird ausgeblendet

 static navigationOptions = { header: null }

Wenn Ihr Bildschirm eine Klassenkomponente ist

static navigationOptions = ({ navigation }) => {
    return {
       header: () => null
    } 
}

Codieren Sie dies in Ihrem Zielbildschirm als erste Methode (Funktion).

Wenn Sie sich auf einem bestimmten Bildschirm verstecken möchten, gehen Sie wie folgt vor:

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

Ich benutze header : nullanstelle von header : { visible : true }React-Native Cli. Dies ist das Beispiel:

static navigationOptions = {
   header : null   
};

In der angegebenen Lösung ist der Header für den HomeScreen ausgeblendet. By-options = {{headerShown: false}}

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>
</NavigationContainer>

Fügen Sie im stackNavigator ein neues Navigationsobjekt hinzu.

Versuche dies :

const MainNavigator = createStackNavigator({
  LoginPage: {screen : LoginPageContainer, navigationOptions: { header: null } },
  MiddlePage: {screen : MiddlePageContainer, navigationOptions: { header: null } },
  SMS: {screen: ShowSmsContainer, navigationOptions: { header: null } },
  Map: {screen: ShowMapContainer, navigationOptions: { header: null } }
});

Ich hoffe es hilft.

Wenn jemand sucht, wie man den Header in componentDidMount umschaltet, schreibt er etwas wie:

  this.props.navigation.setParams({
      hideHeader: true,
  });

Wann

static navigationOptions = ({ navigation }) => {
    const {params = {}} = navigation.state;

    if (params.hideHeader) {
      return {
        header: null,
      }
    }

    return {
        headerLeft: <Text>Hi</Text>,
        headerRight: <Text>Hi</Text>,
        headerTitle: <Text>Hi</Text>
    };
};

Und irgendwo, wenn die Veranstaltung beendet ist:

this.props.navigation.setParams({
  hideHeader: false,
});

Das hat bei mir funktioniert:

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);

In Ihrem Zielbildschirm müssen Sie dies codieren!

 static navigationOptions = ({ navigation }) => {
    return {
       header: null
    }
 }

Sie können den Header folgendermaßen ausblenden:

<Stack.Screen name="Login" component={Login} options={{headerShown: false}}  />

Dies funktioniert für die Stapelnavigation

<Stack.Screen
    name="Home"
    component={HomeComponent}
    options={{
        headerShown: false,
    }}
/>

Wenn Sie es nur von einem Bildschirm entfernen möchten, react-native-navigationdann:

<Stack.Navigator>
    <Stack.Screen 
            name="Login" 
            component={Login} 
            options= {{headerShown: false}} />
</Stack.Navigator>

const CallStack = createStackNavigator({
  Calls: Calls,
  CallsScreen:CallsScreen,
}, {headerMode: 'none'});

CallStack.navigationOptions = {
  tabBarLabel: 'Calls',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),

   header: null,

        headerVisible: false,

};

Alle Antworten zeigen, wie es mit Klassenkomponenten geht, aber für funktionale Komponenten tun Sie Folgendes:

const MyComponent = () => {
    return (
        <SafeAreaView>
            <Text>MyComponent</Text>
        </SafeAreaView>
    )
}

MyComponent.navigationOptions = ({ /*navigation*/ }) => {
    return {
        header: null
    }
}

Wenn Sie die Kopfzeile entfernen, befindet sich Ihre Komponente möglicherweise an Stellen, an denen Sie sie nicht sehen können (wenn das Telefon keinen quadratischen Bildschirm hat). Daher ist es wichtig, sie beim Entfernen der Kopfzeile zu verwenden.

const MyNavigator = createStackNavigator({
  FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
  SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});

//header:null will be removed from upcoming versions

 <Stack.Screen
    name="SignInScreen"
    component={Screens.SignInScreen}
    options={{ headerShown: false }}
  />

options={{ headerShown: false }} funktioniert bei mir.

** **. "@react-navigation/native": "^5.0.7", "@react-navigation/stack": "^5.0.8",

In der Reaktionsnavigation 5.x können Sie die Kopfzeile für alle Bildschirme ausblenden, indem Sie die headerModeStütze des Navigatorto einstellen false.

<Stack.Navigator headerMode={false}>
   {/* Your screens */}
</Stack.Navigator>

Sie können den StackNavigator-Header folgendermaßen ausblenden:

const Stack = createStackNavigator();
function StackScreen() {
    return (
        <Stack.Navigator
            screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Training" component={Training} />
            <Stack.Screen name="Course" component={Course} />
            <Stack.Screen name="Signup" component={Signup} />
        </Stack.Navigator>
    );
}

Es ist wichtig, die Version der React-Navigation-Bibliothek, die Sie verwenden, an die Lösung anzupassen, da sie alle unterschiedlich sind. Für diejenigen, die aus irgendeinem Grund wie ich noch React-Navigation v1.0.0 verwenden, funktionierten beide:

Zum Deaktivieren / Ausblenden des Headers auf einzelnen Bildschirmen:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main, navigationOptions: { header: null } },
    Login: { screen: Login },
    Profile: { screen: Profile, navigationOptions: { header: null } },
  });

Verwenden Sie Folgendes, um alle Bildschirme gleichzeitig zu deaktivieren / auszublenden:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main},
    Login: { screen: Login },
    Profile: { screen: Profile },
  },
  {
    headerMode: 'none',
  }
);

In der neuesten Version von React-Navigation wird der Header auf jedem Bildschirm ausgeblendet: headerMode = {'none'}

<Stack.Navigator
headerMode={'none'}
>
    <Stack.Screen name="Home" component={HomeScreen}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>

für 4.x ist das header: nullveraltet, sollte headerShown: falsestattdessen verwendet werden

Ex:

const AppScreens = createStackNavigator({
  cover: {
    screen: Login,
    path: '/login',
    navigationOptions: () => ({
      headerShown: false,
    }),
  },
})

1. Für den einzelnen Bildschirm können Sie in createStackNavigator wie folgt den Header: null oder den HeaderShown: false festlegen

   const App = createStackNavigator({
    First: {
   screen: Home,
   navigationOptions: {
     header: null,
                      },
          },
   });

2. Blenden Sie den Header mit defaultNavigationOptions auf einmal aus allen Bildschirmen aus

   const App = createStackNavigator({
   
   First: {
     screen: HomeActivity,
   },
   },
   
   {
   defaultNavigationOptions: {
     header: null
   },
   
   });

Wenn Sie den Header von allen Bildschirmen entfernen möchten, gehen Sie zu app.js und fügen Sie diesen Code zu Stack.Navigator hinzu

screenOptions={ { headerShown: false } }