Ukryj nagłówek w nawigatorze stosu. Reaguj na nawigację


140

Próbuję przełączyć ekran za pomocą nawigatora stosu i kart.

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

W tym przypadku najpierw używany jest stacknavigator, a następnie tabnavigator. i chcę ukryć nagłówki nawigatora stosu. WIt nie działa poprawnie, gdy używam opcji nawigacji, takich jak:

navigationOptions: { header: { visible: false } }

Próbuję tego kodu na pierwszych dwóch składnikach, które są używane w programie stacknavigator. jeśli używam tej linii, pojawia się błąd, taki jak:

wprowadź opis obrazu tutaj

Odpowiedzi:


336

UPDATE od wersji 5

Od wersji 5 jest to opcja headerShownwscreenOptions

Przykład użycia:

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

Jeśli chcesz tylko ukryć nagłówek na 1 ekranie, możesz to zrobić, ustawiając screenOptions w komponencie ekranu, na przykład:

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

Zobacz także blog o wersji 5

AKTUALIZACJA
Od wersji 2.0.0-alpha.36 (2019-11-07)
dostępna jest nowa nawigacja Opcja :headershown

      navigationOptions: {
        headerShown: false,
      }

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

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

Stara odpowiedź

Używam tego, aby ukryć pasek stosu (zauważ, że jest to wartość drugiego parametru):

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

W przypadku korzystania z tej metody będzie ona ukryta na wszystkich ekranach.

W twoim przypadku będzie to wyglądać tak:

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

Działa idealnie! dzięki za odpowiedź ur, ale mam jeden problem po dodaniu tego, czyli: przełączenie stacknavigatora na tabnavigator działa dobrze. jeśli chcę wyświetlać nagłówek podczas przełączania ekranu z tabnavigator do stacknaviagtor, co mam zrobić?
Avijit Dutta

2
Hmm, to świetne pytanie. Szczerze mówiąc, tego nie wiem. Możesz spróbować odpowiedzi @Dpkstr na ekranie, na którym chcesz ją wyświetlić, zamiast null będzie to prawda.
Perry

Hmm, już tego próbowałem, ale też nie działało ... dzięki za pierwszą odpowiedź. Na razie drugą funkcjonalność zrobię za pomocą przycisku.
Avijit Dutta

jak dynamicznie wyświetlać i ukrywać nagłówek po kliknięciu przycisku wewnątrz komponentu. Jeśli podamy statyczną navigationOptions = {nagłówek: null}. Całkowicie ukryję nagłówek. Chcę pokazać lub ukryć po kliknięciu jakiegoś przycisku
Venkatesh Somu

1
Jeśli chce ukryć nagłówek konkretnego ekranu w wersji 5 +, powinien użyć optionstakiego rekwizytu<Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />
Oliver D

130

Po prostu użyj poniższego kodu na stronie, na której chcesz ukryć nagłówek

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

zobacz Stack Navigator


Działa dobrze, ale jednym problemem jest to, że kiedy ekran przełącza się na tabNavigator ze stacknavigatora (jak wspomniałem w moich składnikach pytania, takich jak ekran weryfikacji OTP do ekranu listy w tym czasie, wyświetlane są oba nagłówki
Avijit Dutta

Czy możesz mi powiedzieć, jak dokładnie nawigujesz do listy
Dpkstr,

22

Po prostu dodaj to do fragmentu kodu klasy / komponentu, a nagłówek zostanie ukryty

 static navigationOptions = { header: null }

16

Jeśli twój ekran jest komponentem klasy

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

zakoduj to na docelowym ekranie jako pierwszą metodę (funkcję).


1
racja, header: () => nullto właściwy sposób, w przeciwnym razie podczas ładowania strony pojawi się błąd w nagłówku
Cristian Tr

11

Jeśli chcesz ukryć się na określonym ekranie, zrób tak:

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

11

W podanym rozwiązaniu nagłówek jest ukryty dla HomeScreen przez- options = {{headerShown: false}}

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

10

Używam header : nullzamiast header : { visible : true }używać React-Native CLI. to jest przykład:

static navigationOptions = {
   header : null   
};

9

Dodaj nowy obiekt navigationOptions w stackNavigator.

Spróbuj tego :

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

Mam nadzieję, że to pomoże.


7

Jeśli ktoś szuka sposobu przełączania nagłówka to w componentDidMount napisz coś takiego:

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

Kiedy

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

I gdzieś, gdy zdarzenie kończy pracę:

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

6

To zadziałało dla mnie:

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

4

Na docelowym ekranie musisz to zakodować!

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

4

Możesz ukryć nagłówek w ten sposób:

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

3

To działa dla nawigacji stosu

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

2

Jeśli chcesz usunąć go tylko z jednego ekranu w react-native-navigation:

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

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,

};

1

Wszystkie odpowiedzi pokazują, jak to zrobić z komponentami klasy, ale w przypadku komponentów funkcjonalnych robisz:

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

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

Jeśli usuniesz nagłówek, twój komponent może znajdować się w miejscach, w których go nie widać (gdy telefon nie ma kwadratowego ekranu), więc ważne jest, aby użyć go podczas usuwania nagłówka.


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

//header:null will be removed from upcoming versions

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

options={{ headerShown: false }} pracuje dla mnie.

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


1

W React navigation 5.x możesz ukryć nagłówki wszystkich ekranów, ustawiając headerModewłaściwość Navigatorto false.

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

1

Możesz ukryć nagłówek StackNavigator w następujący sposób:

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

0

Ważne jest, aby dopasować używaną wersję biblioteki reaktywnej nawigacji do rozwiązania, ponieważ wszystkie są różne. Dla tych, którzy z jakiegoś powodu, takiego jak ja, nadal używają React-navigation v1.0.0, oba te rozwiązania działały:

Aby wyłączyć / ukryć nagłówek na poszczególnych ekranach:

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

Aby wyłączyć / ukryć wszystkie ekrany naraz, użyj tego:

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

0

W najnowszej wersji reaktywnej nawigacji działa to, aby ukryć nagłówek na każdym ekranie: headerMode = {'none'}

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


0

w przypadku wersji 4.x header: nulljest przestarzała, należy użyć headerShown: falsezamiast niej

dawny:

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

0
  1. Dla pojedynczego ekranu możesz ustawić header: null lub headerShown: false w createStackNavigator w ten sposób

    const App = createStackNavigator({
     First: {
    screen: Home,
    navigationOptions: {
      header: null,
                       },
           },
    });
  2. Ukryj nagłówek na wszystkich ekranach za pomocą defaultNavigationOptions

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

0

jeśli chcesz usunąć nagłówek ze wszystkich ekranów, goto app.js i dodaj ten kod do Stack.Navigator

screenOptions={ { headerShown: false } }
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.