मेरे पास कुछ स्क्रीन पर बैक बटन कैसे हो सकता है जैसे प्रोफाइलस्क्रीन/रिपोर्टरस्क्रीन जैसे कि उस पर क्लिक करने से उपयोगकर्ता कंटेंटफ्लो पर ले जाएगा।

const ProfileNavigator = createStackNavigator({ ProfileScreen });
const ReporterNavigator = createStackNavigator({ ReporterScreen });

const ContentNavigator = createMaterialBottomTabNavigator({ ContentScreen });

const HomeNavigator = createDrawerNavigator({
 ContentFlow:ContentNavigator,
 ProfileFlow:ProfileNavigator,
 ReporterFlow:ReporterNavigator
});

मैंने कंटेंटस्क्रीन में दराज के लिए हेडर बटन जोड़ा है, लेकिन अन्य स्क्रीन के लिए मैं इसके बजाय बैक बटन रखना चाहता हूं, बैक बटन दबाए जाने पर कंटेंटफ्लो पर कैसे नेविगेट करें।

0
Rajat Aggarwal 1 सितंबर 2020, 18:53

1 उत्तर

सबसे बढ़िया उत्तर

आप headerLeft को navigationOptions में एक घटक पर सेट कर सकते हैं। तो उदाहरण के लिए यदि आप ReporterNavigator के अंदर एक या अधिक स्क्रीन रखना चाहते हैं जिसमें एक हेडर बटन है जो उपयोगकर्ता को ContentFlow पर नेविगेट करने की अनुमति देता है तो आप ऐसा कुछ कर सकते हैं:

const ReporterNavigator = createStackNavigator({
  Screen: {
    screen: ScreenComponent,
    navigationOptions: ({ navigation }) => {
      return {
        headerLeft: () => (
          <Button
            title="go to contentflow"
            onPress={() => {
              navigation.navigate('ContentFlow');
            }}
          />
        ),
      };
    },
  },
});

यदि आप ReporterNavigator की सभी स्क्रीन के लिए बटन रखना चाहते हैं, तो आप navigationOptions के बजाय defaultNavigationOptions का उपयोग करना चाहेंगे। ध्यान रखें कि navigationOptions को RouteConfigs के अंदर सेट किया गया है और defaultNavigationOptions को NavigatorConfigs में परिभाषित किया गया है (https://reactnavigation.org/docs/4.x/stack-navigator/#stacknavigatorconfig)।


जब आप ऐसा करते हैं:

const HomeNavigator = createDrawerNavigator({
  ContentFlow: ContentNavigator,
  ProfileFlow: ProfileNavigator,
  ReporterFlow: ReporterNavigator,
});

नेविगेशन ऑब्जेक्ट भी पास हो जाता है। क्योंकि यह ड्रॉअर नेविगेटर से नीचे चला जाता है, यह उस नेविगेटर की नेविगेशन स्थिति रखता है। तो आप दराज नेविगेटर के अंदर स्क्रीन पर नेविगेट करने में सक्षम हैं।

यदि आप ReporterNavigator की नेविगेशन स्थिति तक पहुंचना चाहते हैं, तो आप इसके बजाय अनाम फ़ंक्शन headerLeft में प्रॉप्स तक पहुंच सकते हैं:

// ...
headerLeft: ({navigation}) => (
  // etc...
)
// ...
1
Bas van der Linden 1 सितंबर 2020, 23:39