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




react-native react-navigation (9)

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

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

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

navigationOptions: { header: { visible: false } }

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

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

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

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

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

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

उपयोग 

class Login extends Component {

    static navigationOptions = {
        header: null
    }
}

कक्षा में / घटक की तरह 

static navigationOptions = {
   header : null   
};

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

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

स्टैक नेविगेटर को देखें

मुझे भी यही समस्या है, लेकिन मैंने अपने हेडर को अलग-अलग कक्षाओं में navigationOptions का उपयोग करके काम किया है और मैं createBottomTabNavigator का उपयोग कर रहा हूं जिसका हेडर दिखाई दे रहा है और कक्षाओं का हेडर दिखाई नहीं दे रहा है। मैंने header: null तरह सब कुछ करने की कोशिश की है headerMode: none , header: null और इतने पर, लेकिन नीचे के हेडर को छिपा नहीं सकता था।

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

static navigationOptions = { header: null }

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

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

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

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

};



javascript   react-native   react-navigation   expo