Cambia visualizzazione in Navigator in React Native

Question

Sono nuovo per reagire nativo.

Stavo usando NavigatorIOS ma era troppo limitante, quindi sto cercando di usare Navigator. In NavigatorIOS posso modificare una vista chiamando this.props.navigator.push() ma non funziona in Navigator, sembra essere strutturato diversamente. Come posso modificare le viste usando Navigator?

Answer 1

Questo è il navigatore di lavoro minima - si può fare molto di più (vedere alla fine):

1. è necessario il vostro principale "navigatore" al fine di rendere Navigator componente
2. Nel Navigator è necessario specificare come è necessario eseguire il rendering delle scene per percorsi diversi (proprietà renderScene)
3. In questo metodo "renderScene" è necessario eseguire il rendering Visualizza (scena) in base a quale percorso viene eseguito il rendering. Route è un semplice oggetto javascript e per convenzione le scene possono essere identificate dal parametro "id" del percorso. Per chiarezza e separazione delle preoccupazioni, di solito definisco ogni scena come un componente con nome separato e uso il nome di tali componenti come "id", sebbene sia solo una convenzione. Potrebbe essere qualsiasi cosa (come il numero di scena per esempio). Assicurati di passare navigator come proprietà a tutte le visualizzazioni in renderScene in modo da poter navigare ulteriormente (vedi esempio sotto)
4. Quando vuoi passare a un'altra vista, in effetti spinga o sostituisci la rotta verso quella vista e il navigatore si prende cura di sul rendering di quel percorso come scena e sulla corretta animazione della scena (sebbene l'animazione sia piuttosto limitata) - puoi controllare lo schema di animazione generale ma anche animare ogni scena in modo diverso (vedi i documenti ufficiali per alcuni esempi). Navigator continua pila (o meglio array) di percorsi in modo da poter spostare liberamente tra quelle che sono già in pila (spingendo nuovo, popping, sostituendo ecc)

"Navigator" Vista:

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"}); 
} 

Maggiori dettagli qui https://facebook.github.io/react-native/docs/navigator.html e si può trovare un sacco di esempi in progetto di campioni che fa parte di reagire-native: https://github.com/facebook/react-native/tree/master/Examples/UIExplorer

012.

Answer 2

Trovo che gli esempi di Facebook siano semplicistici o complessi quando si dimostra come funziona il Navigatore. Basato sull'esempio di @jarek-potiuk, ho creato una semplice app che cambierà lo schermo avanti e indietro.

In questo esempio sto usando: 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

Ho avuto lo stesso problema, non ho trovato un buon esempio di navigazione. Volevo la possibilità di controllare le visualizzazioni per andare a una nuova schermata, ma ho anche la possibilità di tornare alla schermata precedente.

Ho usato la risposta di cui sopra da Andrew Wei e ho creato una nuova app, quindi ho copiato il suo codice. Funziona bene ma lo .push continuerà a creare nuovi livelli l'uno sull'altro (Apple> Orange> Apple> Orange> Apple> Orange ecc.). Quindi ho usato .pop nel file Orange.js in goApple() invece di .push.

Questo funziona come un pulsante "indietro", che era quello che stavo cercando, mentre insegnavo come navigare ad altre pagine.