स्टैक नेविगेटर रिएक्ट नेविगेशन में हेडर छिपाएं

Question

मैं स्टैक और टैब नेविगेटर दोनों का उपयोग करके स्क्रीन स्विच करने का प्रयास कर रहा हूं।

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

इस मामले में स्टैकनविगेटर का उपयोग पहले किया जाता है और फिर टैब्नाविगेटर का। और मैं स्टैक नेविगेटर के हेडर को छिपाना चाहता हूं। W यह ठीक तरह से काम नहीं कर रहा है, जब मैं जैसे नेविगेशन को अपनाता हूं:

navigationOptions: { header: { visible: false } }

मैं पहले दो घटकों पर इस कोड की कोशिश कर रहा हूं जो स्टैकनेविगेटर में उपयोग कर रहे हैं। अगर मैं इस लाइन का उपयोग करता हूं तो कुछ त्रुटि हो रही है जैसे ::

Answer 1

संस्करण 5 के रूप में अद्यतन करें

संस्करण 5 के रूप में यह विकल्प headerShownहैscreenOptions

उपयोग का उदाहरण:

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

यदि आप केवल हेडर को 1 स्क्रीन पर छुपाना चाहते हैं, तो आप ऐसा कर सकते हैं स्क्रीनसेवाओं को सेट करके स्क्रीन घटक को उदाहरण के लिए नीचे देखें:

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

संस्करण 5 के बारे में ब्लॉग भी देखें

अद्यतन
संस्करण 2.0.0-alpha.36 के रूप में (2019/11/07),
वहाँ एक नया navigationOption है:headershown

      navigationOptions: {
        headerShown: false,
      }

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

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

पुराना उत्तर

मैं इसका उपयोग स्टैक बार को छिपाने के लिए करता हूं (ध्यान दें कि यह दूसरे परम का मूल्य है):

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

जब आप इस विधि का उपयोग करते हैं तो यह सभी स्क्रीन पर छिपा होगा।

आपके मामले में यह इस तरह दिखेगा:

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

Comments

पूरी तरह से काम करना! उर उत्तर के लिए धन्यवाद, लेकिन मुझे यह जोड़ने के बाद एक समस्या है: :: स्टैकनवीगेटर को अपने काम करने वाले टैबनेविगेटर में बदलना। अगर मैं हैडर दिखाना चाहता हूँ जब मैं tabnavigator से स्टैकनवीगेटर की स्क्रीन स्विच कर रहा हूँ तो मुझे क्या करना चाहिए?

— अविजित दत्ता

हम्म, यह एक महान प्रश्न है। सच कहूं तो मुझे नहीं पता कि आप उस स्क्रीन पर @Dpkstr उत्तर को आज़मा सकते हैं जिसे आप दिखाना चाहते हैं, इसके बजाय अशक्त होना सही होगा।

— पेरी

हम्म, मैंने पहले से ही यह कोशिश की लेकिन यह भी काम नहीं कर रहा था ... आपके पहले उत्तर के लिए धन्यवाद। मैं अभी के लिए एक बटन का उपयोग करके दूसरी कार्यक्षमता बनाऊंगा।

— अविजित दत्ता

घटक के अंदर बटन पर क्लिक करने पर हेडर को गतिशील रूप से कैसे दिखाना और छिपाना है। यदि हम स्थैतिक नैविगेशन प्रदान करते हैं = {शीर्ष लेख: null}। मैं हेडर को पूरी तरह से छिपाऊंगा। जब मैं कुछ बटन पर क्लिक करना चाहता हूं, तो मैं दिखाना या छुपाना चाहता हूं

— वेंकटेश सोमू

यदि वह v5 में एक विशिष्ट स्क्रीन के लिए हेडर को छिपाना चाहता है + तो उसे optionsइस तरह प्रोप का उपयोग करना चाहिए<Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />

— ओलिवर डी

Answer 2

जिस पेज को आप हेडर छुपाना चाहते हैं, उसमें नीचे दिए गए कोड का उपयोग करें

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

स्टैक नेविगेटर का संदर्भ लें

Comments

यह ठीक है, लेकिन एक समस्या यह है कि जब स्क्रीन को स्टैनावैविगेटर से टैबनेविगेटर में बदल दिया जाता है (जैसा कि मेरे प्रश्न घटकों के अनुसार ओटीपीवर्वीफिकेशन स्क्रीन की सूची स्क्रीन पर उस समय दोनों हेडर दिखा रहे हैं

— Avijit

क्या आप मुझे बता सकते हैं कि आप वास्तव में लिस्ट में कैसे प्रवेश कर रहे हैं

— Dpkstr

Answer 3

बस इसे अपने वर्ग / घटक कोड में जोड़ दें स्निपेट और हेडर छिपा दिया जाएगा

 static navigationOptions = { header: null }

Answer 4

अगर आपकी स्क्रीन एक क्लास कंपोनेंट है

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

इसे पहली लक्षित विधि (फ़ंक्शन) के रूप में अपनी लक्षित स्क्रीन में कोडित करें।

Comments

सही, header: () => nullसही तरीका है, अन्यथा पेज लोड करते समय आपको हेडर गड़बड़ दिखाई देती है

— क्रिस्टियन ट्र

Answer 5

यदि आप इस तरह से विशिष्ट स्क्रीन पर छिपाना चाहते हैं:

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

Answer 6

मैं के header : nullबजाय header : { visible : true }मैं का उपयोग कर रहा हूँ प्रतिक्रिया-देशी cli का उपयोग कर रहा हूँ । यह उदाहरण है:

static navigationOptions = {
   header : null   
};

Answer 7

दिए गए समाधान में हैडर होमस्क्रीन के लिए विकल्प- = {{शीर्ष लेख: गलत}} ​​छिपा हुआ है

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

Answer 8

स्टैकनविगेटर में नई नेविगेशनऑब्जेक्ट ऑब्जेक्ट जोड़ें।

इसे इस्तेमाल करे :

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

आशा करता हूँ की ये काम करेगा।

Answer 9

अगर कोई खोज रहा है कि कैसे घटक को टॉगल किया जाए तो घटकडामाउंट में कुछ इस तरह लिखें:

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

कब

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

और कहीं जब घटना खत्म नौकरी:

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

Answer 10

यह मेरे लिए काम किया:

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

Answer 11

अपनी लक्षित स्क्रीन में आपको यह कोड करना होगा!

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

Answer 12

आप हेडर को इस तरह छिपा सकते हैं:

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

Answer 13

यह स्टैक नेविगेशन के लिए काम कर रहा है

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

Answer 14

यदि आप केवल एक स्क्रीन से इसे निकालना चाहते हैं react-native-navigation:

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

Answer 15

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,

};

Answer 16

सभी उत्तर दिखा रहे हैं कि यह कक्षा के घटकों के साथ कैसे किया जाता है, लेकिन आप जो कार्य करते हैं, उनके लिए यह है:

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

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

यदि आप शीर्ष लेख को हटाते हैं तो आपका घटक उन स्थानों पर हो सकता है जहाँ आप इसे नहीं देख सकते हैं (जब फोन में वर्गाकार स्क्रीन नहीं होती है) इसलिए हेडर को निकालते समय इसका उपयोग करना महत्वपूर्ण है।

Answer 17

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

//header:null will be removed from upcoming versions

Answer 18

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

options={{ headerShown: false }} मेरे लिये कार्य करता है।

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

Answer 19

में नेविगेशन 5.x प्रतिक्रिया आप की स्थापना करके सभी स्क्रीन के लिए शीर्षक छिपा कर सकते हैं headerModeके आधार Navigatorकरने के लिए false।

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

Answer 20

आप StackNavigator हैडर को इस तरह छिपा सकते हैं:

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

Answer 21

यह महत्वपूर्ण है कि आप जिस समाधान के लिए उपयोग कर रहे हैं, वह किस तरह के रिएक्शन-नेविगेशन लाइब्रेरी के संस्करण से मेल खाता है। मेरे जैसे किसी कारण के लिए अभी भी प्रतिक्रिया-नेविगेशन v1.0.0 का उपयोग करने वालों के लिए, इन दोनों ने काम किया:

अलग-अलग स्क्रीन पर हेडर को अक्षम / छिपाने के लिए:

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

एक बार में सभी स्क्रीन को अक्षम / छिपाने के लिए, इसका उपयोग करें:

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

Answer 22

प्रतिक्रिया-नेविगेशन के नवीनतम संस्करण में यह हेडर को हर स्क्रीन पर छिपाने का काम करता है: हेडरकोड = {'कोई नहीं'}

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

Answer 23

4.x के लिए, header: nullपदावनत है, headerShown: falseइसके बजाय उपयोग करना चाहिए

उदाहरण के लिए:

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

Answer 24

1. सिंगल स्क्रीन के लिए, आप हेडर सेट कर सकते हैं : अशक्त या हेडरहोस: इस तरह से createStackNavigator में झूठा

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

2. एक बार defaultNavigationOptions का उपयोग करके सभी स्क्रीन से हेडर छिपाएं

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

Answer 25

अगर आप हेडर को सभी स्क्रीन गोटो app.js से हटाना चाहते हैं और इस कोड को Stack.Navigator में जोड़ें

screenOptions={ { headerShown: false } }