Nascondi intestazione nel navigatore dello stack React navigation

Sto cercando di cambiare schermata utilizzando sia lo stack che il navigatore a schede.

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

In questo caso viene utilizzato prima stacknavigator e poi tabnavigator. e voglio nascondere le intestazioni del navigatore dello stack. WNon funziona correttamente quando utilizzo opzioni di navigazione come:

navigationOptions: { header: { visible: false } }

Sto provando questo codice sui primi due componenti che stanno usando in stacknavigator. se uso questa riga, ottengo un errore come:

AGGIORNAMENTO dalla versione 5

A partire dalla versione 5 è l'opzione headerShowninscreenOptions

Esempio di utilizzo:

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

Se desideri nascondere solo l'intestazione su 1 schermata, puoi farlo impostando screenOptions sul componente dello schermo vedi sotto per esempio:

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

Vedi anche il blog sulla versione 5

AGGIORNAMENTO
A partire dalla versione 2.0.0-alpha.36 (2019-11-07),
c'è una nuova opzione di navigazione:headershown

      navigationOptions: {
        headerShown: false,
      }

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

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

Vecchia risposta

Lo uso per nascondere la barra dello stack (notare che questo è il valore del secondo parametro):

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

Quando usi questo metodo, sarà nascosto su tutti gli schermi.

Nel tuo caso sarà simile a questo:

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

Usa semplicemente il codice sottostante nella pagina in cui desideri nascondere l'intestazione

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

fare riferimento a Stack Navigator

Basta aggiungerlo allo snippet di codice della classe / componente e l'intestazione verrà nascosta

 static navigationOptions = { header: null }

Se il tuo schermo è un componente di classe

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

codificalo nella schermata di destinazione come primo metodo (funzione).

Se vuoi nasconderti su una schermata specifica, fai così:

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

Sto usando header : nullinvece di header : { visible : true }usare cli nativo di reazione. questo è l'esempio:

static navigationOptions = {
   header : null   
};

Nella soluzione data l'intestazione è nascosta per HomeScreen da- opzioni = {{headerShown: false}}

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

Aggiungi un nuovo oggetto navigationOptions nello stackNavigator.

Prova questo :

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 } }
});

Spero che sia d'aiuto.

Se qualcuno cerca come attivare / disattivare l'intestazione, quindi in componentDidMount scrivi qualcosa come:

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

quando

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>
    };
};

E da qualche parte quando l'evento finisce il lavoro:

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

Questo ha funzionato per me:

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

Nella tua schermata mirata devi codificare questo!

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

Puoi nascondere l'intestazione in questo modo:

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

Funziona per la navigazione nello stack

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

Se vuoi rimuoverlo solo da una schermata in react-native-navigationallora:

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

};

Tutte le risposte mostrano come farlo con i componenti di classe, ma per i componenti funzionali lo fai:

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

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

Se rimuovi l'intestazione, il tuo componente potrebbe trovarsi in punti in cui non puoi vederlo (quando il telefono non ha lo schermo quadrato), quindi è importante utilizzarlo quando rimuovi l'intestazione.

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 }} per me va bene.

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

In React Navigation 5.x puoi nascondere l'intestazione di tutte le schermate impostando il headerModeprop del Navigatora false.

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

Puoi nascondere l'intestazione StackNavigator in questo modo:

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>
    );
}

È importante abbinare la versione della libreria di navigazione reattiva che stai utilizzando alla soluzione poiché sono tutte diverse. Per coloro che usano ancora la navigazione per la reazione v1.0.0 per qualche motivo come me, hanno funzionato entrambi:

Per disabilitare / nascondere l'intestazione su singole schermate:

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

Per disabilitare / nascondere tutti gli schermi contemporaneamente, usa questo:

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

Nell'ultima versione di React-Navigation questo funziona per nascondere l'intestazione su ogni schermata: headerMode = {'none'}

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

per 4.x, il header: nullè deprecato, dovrebbe usare headerShown: falseinvece

ex:

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

1. Per la schermata singola, puoi impostare header: null o headerShown: false in createStackNavigator in questo modo

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

2. Nascondi l'intestazione da tutte le schermate in una volta utilizzando defaultNavigationOptions

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

se vuoi rimuovere l'intestazione da tutta la schermata vai a app.js e aggiungi questo codice a Stack.Navigator

screenOptions={ { headerShown: false } }