javascript होम स्क्रीन के लिए नेविगेशन स्टैक को रीसेट करना(नेविगेशन पर प्रतिक्रिया दें और मूल निवासी प्रतिक्रिया दें)




react-native navigation (4)

यह मेरा इसे करने का तरीका है :

reset(){
    return this.props
               .navigation
               .dispatch(NavigationActions.reset(
                 {
                    index: 0,
                    actions: [
                      NavigationActions.navigate({ routeName: 'Menu'})
                    ]
                  }));
  }

कम से कम 'होम' के साथ 'मेनू' की जगह आप अपने कार्यान्वयन के लिए यह भी अनुकूलित कर सकते हैं। प्रॉप।

मुझे प्रतिक्रिया नेविगेशन के नेविगेशन और मूल निवासी प्रतिक्रिया के साथ एक समस्या है। यह नेविगेशन को रीसेट करने और होम स्क्रीन पर लौटने के बारे में है।

मैंने एक ड्रैवर नेविगेटर के अंदर एक स्टैक नेविगेटर का निर्माण किया है, और होम स्क्रीन और अन्य स्क्रीन के बीच नेविगेशन काम कर रहा है। लेकिन समस्या यह है, कि नेविगेशन स्टैक बढ़ता है और बढ़ता है। मुझे यकीन नहीं है कि स्टैक से एक स्क्रीन को कैसे निकालना है।

उदाहरण के लिए होम स्क्रीन से सेटिंग्स स्क्रीन पर जाते समय, फिर प्रवेश स्क्रीन पर और आखिर में होम स्क्रीन पर, होम स्क्रीन स्टैक में दो बार होता है। वापस बटन के साथ मैं ऐप से नहीं निकलता, लेकिन फिर से प्रवेश स्क्रीन पर।

होम बटन का चयन करते समय स्टैक का रीसेट बहुत अच्छा होगा, लेकिन मुझे नहीं पता कि यह कैसे करना है। यहां किसी ने एक अन्य व्यक्ति की ऐसी ही समस्या के साथ मदद करने की कोशिश की, लेकिन समाधान मेरे लिए काम नहीं करता

const Stack = StackNavigator({
  Home: {
    screen: Home
  },
  Entry: {
    screen: Entry
  },
  Settings: {
    screen: Settings
  }
})

export const Drawer = DrawerNavigator({
  Home: {
    screen: Stack
  }},
  {
    contentComponent: HamburgerMenu
  }
)

और यह दराज स्क्रीन का एक सरल उदाहरण है

export default class HamburgerMenu extends Component {
  render () {
    return <ScrollView>
      <Icon.Button
        name={'home'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Home')}}>
        <Text>{I18n.t('home')}</Text>
      </Icon.Button>

      <Icon.Button
        name={'settings'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Settings')}}>
        <Text>{I18n.t('settings')}</Text>
      </Icon.Button>

      <Icon.Button
        name={'entry'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Entry')}}>
        <Text>{I18n.t('entry')}</Text>
      </Icon.Button>
    </ScrollView>
  }
}

मुझे आशा है आप मेरी मदद कर सकते हैं। यह नेविगेशन का एक अनिवार्य हिस्सा है और एक समाधान महान होगा!


यहाँ मैं यह कैसे कर रहा हूं:

import { NavigationActions } from 'react-navigation'

this.props.navigation.dispatch(NavigationActions.reset({
    index: 0,
    key: null,
    actions: [NavigationActions.navigate({ routeName: 'ParentStackScreen' })]
}))

महत्वपूर्ण हिस्सा key: null

वह बाल नेविगेटर से पैरवी नेविगेटर तक नेविगेट करते समय स्टैक को पोंछते हैं।

ऐसा करें कि यदि आपको यह त्रुटि मिलती है:

एनिमेशन के लिए, मैं उपयोग करता हूँ

// https://github.com/oblador/react-native-animatable
import * as Animatable from 'react-native-animatable'

मैं सिर्फ अपने सभी एनिमेशन को नियंत्रित करता हूं उन्हें <Animatable.View> साथ लपेटकर किसी भी घटक पर रखें।


आपके स्टैक नेविगेटर और ड्रेवर नेविगेटर में आपने होम को एक कुंजी के रूप में इस्तेमाल किया है, और मुझे लगता है कि यह अद्वितीय होना चाहिए और यही कारण है कि समस्या पैदा करने के लिए क्या आप ड्रेवर नेविगेटर के अंदर स्टैक के साथ होम को बदलने की कोशिश कर सकते हैं।

उम्मीद है कि यह मदद मिलेगी :)


पीठ का उपयोग करने के लिए, आपको पथ से जुड़े अद्वितीय कुंजी को ढूंढना होगा। अपने नेविगेशन प्रसारण के अंदर, आप उस पथ का उपयोग करके स्टैक पर पहले मार्ग को ढूंढने के लिए मौजूदा स्थिति को खोज सकते हैं, अपनी चाबी पकड़ सकते हैं और वापस पास कर सकते हैं। वापस तो आपके द्वारा दिए गए रास्ते से पहले स्क्रीन पर नेविगेट करेंगे।

  let key;

  if (action.payload) {
    // find first key associated with the route
    const route = action.payload;

    const routeObj = state.routes.find( (r) => r.routeName === route );

    if (routeObj) {
      key = { key: routeObj.key };
    }
  }

  return AppNavigator.router.getStateForAction( NavigationActions.back( key ), state );