Header im Stack-Navigator ausblenden Reagieren Sie auf die Navigation

132

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 ::

Geben Sie hier die Bildbeschreibung ein

Avijit Dutta
quelle

Antworten:

320

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,
  }
 }
);
Perry
quelle
Perfekt funktionieren! Vielen Dank für Ihre Antwort, aber ich habe ein Problem, nachdem ich dies hinzugefügt habe: :: Stitchnavigator auf Tabnavigator umschalten funktioniert einwandfrei. Wenn ich den Header anzeigen möchte, wenn ich vom Tabnavigator zum Stacknaviagtor wechsle, was soll ich tun?
Avijit Dutta
2
Hmm, das ist eine gute Frage. Um ehrlich zu sein, weiß ich das nicht. Sie können die @ Dpkstr-Antwort auf dem Bildschirm versuchen, auf dem Sie sie anzeigen möchten. Statt null wäre dies der Fall.
Perry
Hmm, ich habe es bereits versucht, aber es hat auch nicht funktioniert ... danke für deine erste Antwort. Ich werde die zweite Funktionalität erstmal mit einem Knopf machen.
Avijit Dutta
So zeigen Sie den Header dynamisch an und aus, wenn Sie auf die Schaltfläche in der Komponente klicken. Wenn wir statische Navigation angebenOptions = {header: null}. Ich werde den Header komplett ausblenden. Ich möchte zeigen , oder auszublenden , wenn auf einigen klicken
Venkatesh Somu
1
Wenn er den Header für einen bestimmten Bildschirm in Version 5 + ausblenden möchte, sollte er eine solche optionsRequisite verwenden<Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />
Oliver D,
130

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

Dpkstr
quelle
Es ist in Ordnung, aber ein Problem ist, dass, wenn der Bildschirm von stacknavigator in tabNavigator wechselt (wie in meinen Fragenkomponenten wie OTPverification-Bildschirm erwähnt, um den Bildschirm zu diesem Zeitpunkt anzuzeigen, beide Header angezeigt werden
Avijit Dutta
Können Sie mir sagen, wie genau Sie zu List
Dpkstr
22

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

 static navigationOptions = { header: null }
Vaibhav Bacchav
quelle
15

Wenn Ihr Bildschirm eine Klassenkomponente ist

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

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


quelle
1
header: () => nullRichtig , ist der richtige Weg, sonst bekommen Sie einen Header-Fehler beim Laden der Seite
Cristian Tr
11

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 };
}
Waqar UlHaq
quelle
10

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

static navigationOptions = {
   header : null   
};
Cevin Ways
quelle
10

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>
Abhishek Kumar
quelle
9

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.

Narayan Shrestha
quelle
7

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,
});
Ernestyno
quelle
6

Das hat bei mir funktioniert:

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);
Diego Santa Cruz Mendezú
quelle
4

In Ihrem Zielbildschirm müssen Sie dies codieren!

 static navigationOptions = ({ navigation }) => {
    return {
       header: null
    }
 }
Pheng Sengvuthy
quelle
4

Sie können den Header folgendermaßen ausblenden:

<Stack.Screen name="Login" component={Login} options={{headerShown: false}}  />
Arun D Nambissan
quelle
3

Dies funktioniert für die Stapelnavigation

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

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>
Mehdi Raza
quelle
1
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,

};
Donald
quelle
1

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.

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

//header:null will be removed from upcoming versions
Farrukh Taqveem Haider
quelle
1
 <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",

mainak
quelle
1

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>
Ajay Sivan
quelle
1

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>
    );
}
Paresh Chavda
quelle
0

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',
  }
);
Edward Tan
quelle
0

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>

lamazing
quelle
0

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,
    }),
  },
})
Benzin
quelle
0
  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
    },
    
    });
Manan
quelle
0

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 } }
Mehrad Farahnak
quelle