it-swarm.com.de

Navigation zwischen verschiedenen verschachtelten Stapeln

Das Ziel

Navigieren Sie mithilfe der Reaktionsnavigation von einem Bildschirm in einem Navigator zu einem Bildschirm in einem anderen Navigator.

Mehr Details

Wenn ich die folgende Navigator-Struktur habe:

  • Übergeordneter Navigator
    • Verschachtelter Navigator 1
      • bildschirm A
      • bildschirm B
    • Verschachtelter Navigator 2
      • bildschirm C
      • bildschirm D

wie gehe ich von Bildschirm D unter verschachteltem Navigator 2 zu Bildschirm A unter verschachteltem Navigator 1? Wenn ich jetzt versuche, navigation.navigate von Bildschirm D zu Bildschirm A zu wechseln, wird ein Fehler angezeigt, der besagt, dass er nicht über Bildschirm A weiß, sondern nur Bildschirm C und D.

Ich weiß, dass dies in verschiedenen Formen an verschiedenen Stellen auf dieser Website sowie bei GitHub ( https://github.com/react-navigation/react-navigation/issues/983 , https: //) abgefragt wurde. github.com/react-navigation/react-navigation/issues/335#issuecomment-280686611 ) aber für etwas so grundlegendes fehlt es an klaren Antworten, und das Durchblättern von Hunderten von GitHub-Kommentaren auf der Suche nach einer Lösung ist nicht so toll . 

Vielleicht kann diese Frage die Vorgehensweise für jeden, der dieses sehr häufige Problem trifft, festlegen.

8
izikandrw

Sie können den dritten Parameter von navigate verwenden, um Unteraktionen festzulegen.

Wenn Sie beispielsweise von Bildschirm D unter verschachteltem Navigator 2 zu Bildschirm A unter verschachteltem Navigator 1 wechseln möchten:

this.props.navigation.navigate('NestedNavigator1', {}, NavigationActions.navigate({ routeName: 'screenB' }))

Wenn Sie verschachtelte Navigatoren verwenden, sollten Sie auch den Abschnitt Häufige Fehler in der Dokumentation zu Version 2 überprüfen.

11
Stackia

Ich habe auch eine solche Lösung gefunden hier :

onPress={() =>
    Promise.all([
    navigation.dispatch(
        NavigationActions.reset({
            index: 0,
            // TabNav is a TabNavigator nested in a StackNavigator
            actions: [NavigationActions.navigate({ routeName: 'TabNav' })]
        })
    )
    ]).then(() => navigation.navigate('specificScreen'))
}
0
Aliaksei

Reagieren Sie Navigation v3:

Navigation.navigate nimmt jetzt ein Objekt als Parameter an. Sie legen den Stapelnamen fest und navigieren dann wie folgt zu der Route in diesem Stapel.

navigation.navigate(NavigationActions.navigate({
    routeName: 'YOUR_STACK',
    action: NavigationActions.navigate({ routeName: 'YOUR_STACK-subRoute' })
}))

Wo ist 'YOUR_STACK', wie immer Ihr Stack aufgerufen wird, wenn Sie ihn erstellen ...

  YOUR_STACK: createStackNavigator({ subRoute: ... })
0
Phil Andrews

Mein Ziel war es, dass die Authentifizierungsbildschirme den gleichen Hintergrund und den Rest der App mithilfe des regulären Stapelübergangs haben.

Nach Stunden habe ich festgestellt, dass die Lösung darin besteht, createStackNavigator() in derselben Datei wie Ihr Komponenten-Wrapper zu haben. Damit Sie den static router Erfolgreich als document deklarieren können. Dies vermeidet die Warnung You should only render one navigator explicitly in your app Und Sie können this.props.navigation.navigate('AnyScreen') verwenden, um zu einem verschachtelten Bildschirm zu navigieren.

AuthRouter.js

export const AuthNavigationStack = createStackNavigator(
  {
    Login: {
      screen: Login
    },
    CreateAccount: {
      screen: CreateAccount
    }
  }
);

export default class AuthContainer extends React.Component {
  constructor( props ) {
    super( props );
  }

  static router = AuthNavigationStack.router;

  render() {
    return (
      <ImageBackground
        style={ {
          width: '100%',
          height: '100%'
        } }
        source={ require( '../Images/johannes-andersson-yosimite.jpg' ) }
        blurRadius={ 10 }
      >
        <StatusBar
          barStyle="dark-content"
          backgroundColor="transparent"
          translucent={ true }
        />
        <AuthNavigationStack navigation={ this.props.navigation } />
      </ImageBackground>
    );
  }
}

MessengerRouter.js

export const MessengerStackNavigator = createStackNavigator(
  {
    Chat: {
      screen: Chat,
    },
    User: {
      screen: User,
    },
  }
);

export default class MainContainer extends React.Component {
  constructor( props ) {
    super( props );
  }

  static router = MessengerStackNavigator.router;

  render() {
    return <MessengerStackNavigator navigation={ this.props.navigation } />;
  }
}

Router.js

import { createStackNavigator } from 'react-navigation';

import AuthRouter from './AuthRouter';
import MessengerRouter from './MessengerRouter';

export const RootNavigationStack = createStackNavigator( {
  AuthContainer: {
    screen: AuthRouter,
    navigationOptions: () => ( {
      header: null
    } )
  },
  MessengerRouter: {
    screen: MessengerRouter,
    navigationOptions: () => ( {
      header: null
    } )
  }
} );

RootContainer.js

import { RootNavigationStack } from '../Config/Router';

class RootContainer extends Component {

  render() {
    return <RootNavigationStack />;
  }
}

Anmerkungen:

  • Übergeben Sie header: null Vom RootNaviagtionStack an die verschachtelten Stapel, um den überlappenden Header zu entfernen

  • Wenn Sie von verschachteltem A zu verschachteltem B navigieren und die Schaltfläche "Zurück" verwenden, kehren Sie zum ersten Bildschirm in verschachteltem B zurück. Kein großes Problem, aber ich habe nicht herausgefunden, wie es behoben werden kann.

0
Son Le

Völlige Freiheit: Singleton mit Navigationsoptionen

Wenn Sie über mehrere Navigationsstapel und Unterstapel verfügen, kann es frustrierend sein, wenn Sie wissen, wie Sie einen Verweis auf den gewünschten Stapel erhalten, wenn Sie die Konfiguration von React Navigation festlegen. Wenn Sie zu einem bestimmten Zeitpunkt einfach einen bestimmten Stapel referenzieren könnten, wäre dies wesentlich einfacher. Hier ist wie.

  1. Erstellen Sie ein Singleton, das für den Stack spezifisch ist, auf den Sie irgendwo verweisen möchten.
    // drawerNavigator.js . (or stackWhatever.js)
    const nav = {}
    export default {
      setRef: ref => nav.ref = ref,
      getRef: () => nav.ref
    }

2. Rufen Sie auf dem untergeordneten Bildschirm eines Stapels einen Verweis auf seine Eigenschaften ab. Navigation

    import { createBottomTabNavigator } from 'react-navigation'
    import drawerNavigation from '../drawerNavigator'

    const TabNavigation = createBottomTabNavigator(
      {
        // screens listed here
      },
      {
        navigationOptions: ({ navigation }) => {
          // !!! secret sauce set a reference to parent
          drawerNavigation.setRef(navigation)
          return {
            // put navigation options
          }
        }
      }
    )

3. Jetzt können Sie drawerNavigator überall innerhalb oder außerhalb referenzieren

    // screen.js
    import drawerNavigator from '../drawerNavigator'

    export default class Screen extends React.Component {
      render() {
        return (
          <View>
            <TouchableHighlight onPress={() => drawerNavigator.getRef().openDrawer()}>
              <Text>Open Drawer</Text>
            </TouchableHighlight>
          </View>
        )
      }
    }

Erklärung

In Schritt 2 ist ein Tab-Navigator einer der Bildschirme in einem Drawer Navigator. Der Tab-Navigator muss die Schublade schließen. Sie können jedoch an einer beliebigen Stelle in Ihrer App drawerNavigator.getRef().closeDrawer() aufrufen, nachdem dieser Schritt ausgeführt wurde.

0
Jason Sebring
 const subAction = NavigationActions.navigate({ routeName: 'SignInScreen' });
      AsyncStorage.clear().then(() =>
        this.props.navigation.navigate('LoggedOut', {}, subAction));

LoggedOut ist der Stapelname, unter dem sich der Anmeldebildschirm befindet.

0
Rishav Kumar

Bei der Arbeit an einem reaktionsinternen Projekt bin ich auf dieselbe Situation gestoßen. Ich habe verschiedene Möglichkeiten beim Navigieren zum Bildschirm ausprobiert, ist aber fehlgeschlagen.

Nach vielen Versuchen versuchte ich, das Navigationsobjekt der Eltern an Kinder zu übergeben, und rief einen Aufruf der Navigationsfunktion an, und es funktionierte.

Nun zu Ihren Problemen: Wenn Sie von Bildschirm D zu Bildschirm A navigieren möchten, führen Sie die folgenden Schritte aus.

-> Übergeben Sie verschachtelte Navigationshilfsmittel des Navigators 2 mithilfe von screenProps ..__ an ihre Kinder.

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

    constructor(props) {
        super(props);
        this.state = {
            profileData: this.props.navigation.state.params,
            route_index: '',
        }
    }

    render() {
        return (
            <ParentNavigator screenProps={this.props.navigation} />
        );
    }
}

export const ParentNavigator = StackNavigator({
  // ScreenName : { screen : importedClassname }
  Nested1: { screen: nested1 },
  Nested2: { screen : nestes1 }
});

export const nested1 = StackNavigator({
  ScreenA: { screen: screenA },
  ScreenB: { screen : screenB }
});

export const nested2 = StackNavigator({
  ScreenC: { screen: screenC },
  ScreenD: { screen : screenD }
});

Sie können die Navigation bei Kindern über empfangen 

const {navigate} = this.props.screenProps.navigation;

Jetzt kann mit diesem navigate () zwischen untergeordneten Elementen navigiert werden.

Ich akzeptiere, dass dieser Prozess wenig verwirrend ist, aber ich konnte keine Lösungen finden, also musste ich damit einverstanden sein, da ich meine Anforderung erfüllen muss. 

0
HungrySoul