Yığın gezgini React gezinmesinde üstbilgiyi gizle

Hem yığın hem de sekme gezginini kullanarak ekranı değiştirmeye çalışıyorum.

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

Bu durumda önce stacknavigator, ardından tabnavigator kullanılır. ve yığın gezgininin başlıklarını gizlemek istiyorum. Aşağıdaki gibi gezinme seçeneklerini kullandığımda WIt düzgün çalışmıyor:

navigationOptions: { header: { visible: false } }

Bu kodu stacknavigator'da kullanılan ilk iki bileşen üzerinde deniyorum. Bu satırı kullanırsam, aşağıdaki gibi bir hata alıyorum:

5. sürümden itibaren GÜNCELLEME

Sürümünün 5 olarak, seçenek headerShowniçindescreenOptions

Kullanım örneği:

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

Yalnızca 1 ekrandaki başlığı gizlemek istiyorsanız, bunu ekran bileşenindeki screenOptions'ı ayarlayarak yapabilirsiniz, örneğin aşağıya bakın:

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

Ayrıca sürüm 5 hakkındaki bloga bakın

GÜNCELLEME
2.0.0-alpha.36 (2019-11-07) sürümünden itibaren,
yeni bir gezinme seçeneği bulunmaktadır.headershown

      navigationOptions: {
        headerShown: false,
      }

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

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

Eski cevap

Yığın çubuğunu gizlemek için bunu kullanıyorum (bunun ikinci parametrenin değeri olduğuna dikkat edin):

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

Bu yöntemi kullandığınızda, tüm ekranlarda gizlenecektir.

Senin durumunda şöyle görünecek:

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

Başlığı gizlemek istediğiniz sayfada aşağıdaki kodu kullanmanız yeterlidir

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

Stack Navigator'a bakın

Bunu sınıf / bileşen kod pasajınıza eklemeniz yeterlidir; Başlık gizlenecektir

 static navigationOptions = { header: null }

Ekranınız bir sınıf bileşeniyse

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

bunu hedeflenen ekranda ilk yöntem (işlev) olarak kodlayın.

Belirli bir ekranda bundan daha çok gizlemek istiyorsanız:

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

Verilen çözümde, HomeScreen by- options = {{headerShown: false}} için Header gizlidir

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

Ben kullanıyorum header : nullyerine header : { visible : true }ben kullanıyorum tepki yerli cli. bu örnek:

static navigationOptions = {
   header : null   
};

StackNavigator'a yeni navigationOptions nesnesi ekleyin.

Bunu dene :

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

Umarım yardımcı olur.

Başlığın nasıl değiştirileceğini arayan biri, componentDidMount'a şöyle bir şey yazıyorsa:

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

Ne zaman

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

Ve olay bittiğinde bir yerde:

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

Bu benim için çalıştı:

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

Hedeflenen ekranınızda bunu kodlamalısınız!

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

Başlığı şu şekilde gizleyebilirsiniz:

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

Bu yığın gezinme için çalışıyor

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

Yalnızca bir ekrandan kaldırmak istiyorsanız, o react-native-navigationzaman:

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

};

Tüm cevaplar, sınıf bileşenleriyle nasıl yapılacağını gösteriyor, ancak işlevsel bileşenler için yaparsınız:

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

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

Başlığı kaldırırsanız, bileşeniniz göremediğiniz yerlerde (telefonun kare ekranı olmadığında) olabilir, bu nedenle başlığı kaldırırken kullanmak önemlidir.

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 }} benim için çalışıyor.

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

Gelen 5.x navigasyon tepki Eğer ayarlayarak tüm ekranlar için başlık gizleyebilirsiniz headerModeait pervane Navigatoriçin false.

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

StackNavigator başlığını şu şekilde gizleyebilirsiniz:

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

Kullanmakta olduğunuz react-navigasyon kitaplığının hangi sürümünü çözüme uydurmak önemlidir, çünkü hepsi farklıdır. Benim gibi bir nedenle hala react-navigasyon v1.0.0'ı kullananlar için, bunların ikisi de işe yaradı:

Başlığı ayrı ekranlarda devre dışı bırakmak / gizlemek için:

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

Tüm ekranları aynı anda devre dışı bırakmak / gizlemek için şunu kullanın:

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

React-navigation uygulamasının en son sürümünde bu, her ekranda üstbilgiyi gizlemeye çalışır: headerMode = {'none'}

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

4.x için header: null, kullanımdan kaldırılmıştır, headerShown: falsebunun yerine kullanılmalıdır

örn:

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

1. Tek ekran için, createStackNavigator'da header: null veya headerShown: false değerini bunun gibi ayarlayabilirsiniz.

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

2. DefaultNavigationOptions kullanarak üstbilgiyi tüm ekranlardan tek seferde gizleyin

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

Başlığı tüm ekran goto app.js'den kaldırmak ve bu kodu Stack.Navigator'a eklemek isterseniz

screenOptions={ { headerShown: false } }