wake-up-neo.com

Kopfzeile im Stack-Navigator ausblenden React Navigation

Ich versuche, den Bildschirm sowohl mit dem Stapel- als auch mit dem Tabulator-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 des Stack Navigators verstecken. Es funktioniert nicht richtig, wenn ich Navigationsoptionen verwende wie:

navigationOptions: { header: { visible: false } }

ich versuche diesen Code auf den ersten beiden Komponenten, die in Stacknavigator verwenden. Wenn ich diese Zeile benutze, bekomme ich einen Fehler wie:

enter image description here

javascriptreact-nativereact-navigationexpo
61
Avijit Dutta

Ich verwende dies, um die Stack-Leiste auszublenden (beachte, 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 deinem Fall wird es so aussehen:

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

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

105
Dpkstr

Fügen Sie dies einfach in Ihr Code-Snippet für Klassen/Komponenten ein, und die Kopfzeile wird ausgeblendet

 static navigationOptions = { header: null }
20
Vaibhav Bacchav

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

Wenn Ihr Bildschirm eine Klassenkomponente ist

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

code dies in Ihrem Zielbildschirm als erste Methode (Funktion).

8
user7023664

Wenn jemand sucht, wie man den Header so in componentDidMount umschaltet, schreibe 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 zu Ende ist:

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

Ich benutze header : null anstatt header : { visible : true } Ich verwende reaktions-native CLI. Das ist das Beispiel:

static navigationOptions = {
   header : null   
};
6
Cevin Ways

Verwenden

static navigationOptions = { header: null }

in der Klasse/Komponente wie

class Login extends Component {

    static navigationOptions = {
        header: null
    }
}
5
Vahid Akhtar

Das hat bei mir funktioniert:

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

In Ihrem Zielbildschirm müssen Sie dies codieren!

 static navigationOptions = ({ navigation }) => {
    return {
       header: null
    }
 }
2
Pheng Sengvuthy
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,

};
1
donald

Alle Antworten zeigen, wie es mit Klassenkomponenten gemacht wird, 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). Verwenden Sie sie daher unbedingt, wenn Sie die Kopfzeile entfernen.

0
Vencovsky

Ich habe das gleiche Problem, aber ich habe meine Header-Arbeit in den einzelnen Klassen mit navigationOptions erledigt und ich verwende createBottomTabNavigator, dessen Header sichtbar und der Header von Klassen nicht sichtbar ist. Ich habe alles versucht wie headerMode: none, header: null und so weiter, aber die Kopfzeile von bottomTabNavigator konnte nicht ausgeblendet werden.

0
Aun Abbas