Ändern Sie die Ansicht im Navigator in React Native

Question

Ich bin neu, native reagieren.

Ich benutzte NavigatorIOS, aber es war zu begrenzend, also versuche ich, Navigator zu verwenden. In NavigatorIOS kann ich eine Ansicht ändern, indem ich this.props.navigator.push() aufrufen, aber es funktioniert nicht im Navigator, es scheint anders strukturiert zu sein. Wie ändere ich Ansichten in Navigator?

Answer 1

, dass die minimalen Arbeits Navigator ist - es ist viel mehr tun kann (am Ende sehen):

1. Sie benötigen Haupt „Navigator“ Ansicht Navigator Komponente
2. im Navigator Sie angeben müssen, um zu rendern Wie Sie Szenen für verschiedene Routen rendern sollten (renderScene-Eigenschaft)
3. In dieser "renderScene" -Methode sollten Sie die Ansicht (Szene) basierend darauf rendern, welche Route gerendert wird. Route ist ein einfaches JavaScript-Objekt und nach Konvention können Szenen anhand des ID-Parameters der Route identifiziert werden. Für Klarheit und Trennung von Bedenken definiere ich normalerweise jede Szene als separate benannte Komponente und verwende den Namen dieser Komponenten als "id", obwohl es nur eine Konvention ist. Es könnte was auch immer sein (wie Szenennummer zum Beispiel). Stelle sicher, dass du den Navigator als Eigenschaft an all diese Ansichten in renderScene übergibst, damit du weiter navigieren kannst (siehe unten)
4. Wenn du zu einer anderen Ansicht wechseln willst, schiebst oder ersetzst du die Route zu dieser Ansicht und der Navigator kümmert sich darum über das Rendern dieser Route als Szene und das korrekte Animieren der Szene (obwohl das Animationssatz ziemlich begrenzt ist) - Sie können das allgemeine Animationsschema steuern, aber auch jede Szene anders animieren (siehe die offizielle Dokumentation für einige Beispiele). Navigator hält Stapel (oder besser gesagt Array) von Routen, so dass Sie frei zwischen denen, bewegen können, die bereits auf dem Stapel (durch neue drängen, knallen, ersetzen usw.)

„Navigator“ Ansicht:

render: function() { 
<Navigator style={styles.navigator} 
     renderScene={(route, nav) => 
     {return this.renderScene(route, nav)}} 
/> 
}, 

renderScene: function(route,nav) { 
    switch (route.id) { 
     case "SomeComponent": 
     return <SomeComponent navigator={nav} /> 
     case "SomeOtherComponent: 
     return <SomeOtherComponent navigator={nav} /> 
    } 
} 

SomeComponent:

onSomethingClicked: function() { 
    // this will push the new component on top of me (you can go back) 
    this.props.navigator.push({id: "SomeOtherComponent"}); 
} 


onSomethingOtherClicked: function() { 
    // this will replace myself with the other component (no going back) 
    this.props.navigator.replace({id: "SomeOtherComponent"}); 
} 

Weitere Details hier https://facebook.github.io/react-native/docs/navigator.html und Sie viele Beispiele in den Proben Projekt finden können, die Teil reagieren-native ist: https://github.com/facebook/react-native/tree/master/Examples/UIExplorer

Answer 2

Ich finde, dass Facebook-Beispiele entweder zu einfach oder zu komplex sind, wenn demonstriert wird, wie der Navigator funktioniert. Basierend auf @ Jarek-Potiuk Beispiel, habe ich eine einfache App erstellt, die Bildschirme hin und her wechseln wird.

In diesem Beispiel verwende ich: react-native: 0.36.1

index.android.js

import React, { Component } from 'react'; 
import { AppRegistry, Navigator } from 'react-native'; 

import Apple from './app/Apple'; 
import Orange from './app/Orange' 

class wyse extends Component { 
    render() { 
    return (
     <Navigator 
     initialRoute={{screen: 'Apple'}} 
     renderScene={(route, nav) => {return this.renderScene(route, nav)}} 
     /> 
    ) 
    } 

    renderScene(route,nav) { 
    switch (route.screen) { 
     case "Apple": 
     return <Apple navigator={nav} /> 
     case "Orange": 
     return <Orange navigator={nav} /> 
     } 
    } 
} 

AppRegistry.registerComponent('wyse',() => wyse); 

app/Apple.js

import React, { Component } from 'react'; 
import { View, Text, TouchableHighlight } from 'react-native'; 

export default class Apple extends Component { 
    render() { 
    return (
     <View> 
     <Text>Apple</Text> 
     <TouchableHighlight onPress={this.goOrange.bind(this)}> 
      <Text>Go to Orange</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 

    goOrange() { 
    console.log("go to orange"); 
    this.props.navigator.push({ screen: 'Orange' }); 
    } 
} 

app/orange. js

import React, { Component, PropTypes } from 'react'; 
import { View, Text, TouchableHighlight } from 'react-native'; 

export default class Orange extends Component { 
    render() { 
    return (
     <View> 
     <Text>Orange</Text> 
     <TouchableHighlight onPress={this.goApple.bind(this)}> 
      <Text>Go to Apple</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 

    goApple() { 
    console.log("go to apple"); 
    this.props.navigator.push({ screen: 'Apple' }); 
    } 
} 

Answer 3

Ich hatte die gleichen Probleme, konnte kein gutes Beispiel für die Navigation finden. Ich wollte die Möglichkeit haben, Ansichten zu steuern, um zu einem neuen Bildschirm zu wechseln, aber auch die Möglichkeit, zum vorherigen Bildschirm zurückzukehren.

Ich habe die obige Antwort von Andrew Wei verwendet und eine neue App erstellt und dann seinen Code kopiert. Das funktioniert gut, aber die .push wird weiterhin neue Schichten übereinander erstellen (Apple> Orange> Apple> Orange> Apple> Orange usw.). Also habe ich .pop in der Orange.js Datei unter goApple() anstelle von .Push verwendet.

Dies funktioniert jetzt wie ein "zurück" Knopf, was ich suchte, während ich lehrte, wie man zu anderen Seiten navigiert.