2015-03-29 50 views
120

Sto esplorando le possibilità di React Native durante lo sviluppo di un'applicazione demo con navigazione personalizzata tra le viste con l'aiuto di Navigator componente - http://facebook.github.io/react-native/docs/navigator.html#contentReact-Native - navigazione personalizzata con componente Navigator

La classe applicazione principale rende navigatore e all'interno renderScene rendimenti componente passato:

class App extends React.Component { 
    render() { 
     return (
      <Navigator 
       initialRoute={{name: 'WelcomeView', component: WelcomeView}} 
       configureScene={() => { 
        return Navigator.SceneConfigs.FloatFromRight; 
       }} 
       renderScene={(route, navigator) => { 
        // count the number of func calls 
        console.log(route, navigator); 

        if (route.component) { 
         return React.createElement(route.component, { navigator }); 
        } 
       }} 
      /> 
     ); 
    } 
} 

Per ora applicazione contiene 2 guardati:

class FeedView extends React.Component { 
    render() { 
     return (
      <View style={styles.container}> 
       <Text> 
        Feed View! 
       </Text> 
      </View> 
     ); 
    } 
} 

class WelcomeView extends React.Component { 
    onPressFeed() { 
     this.props.navigator.push({ 
      name: 'FeedView', 
      component: FeedView 
     }); 
    } 

    render() { 
     return (
      <View style={styles.container}> 
       <Text style={styles.welcome}> 
        Welcome View! 
       </Text> 

       <Text onPress={this.onPressFeed.bind(this)}> 
        Go to feed! 
       </Text> 
      </View> 
     ); 
    } 
} 

Quello che voglio capire è -

  • vedo in registri che quando si preme "andare a nutrire" renderScene è chiamato più volte anche se la vista rende correttamente una volta. È così che funziona l'animazione?

    index.ios.js:57 Object {name: 'WelcomeView', component: function} 
    index.ios.js:57 Object {name: 'FeedView', component: function} 
    // renders Feed View 
    
  • fa In generale il mio approccio è conforme al modo Reagire, o si può fare meglio?

Quello che voglio raggiungere è qualcosa di simile a NavigatorIOS ma senza barra di navigazione (tuttavia alcuni punti di vista avranno il loro barra di navigazione personalizzata).

+1

@ericvicenti questo esempio dovrebbe essere incluso nella [Pagina di navigazione] (https: //facebook.github .io/react-native/docs/navigator.html # contenuto) nei documenti. È più completo e offre un quadro migliore di come utilizzare il componente Navigator nel contesto. – greatwitenorth

+0

Prova semplicemente il tuo esempio, se la scena cambia automaticamente quando si verifica un push del navigatore? Per me il tuo esempio non mostra mai la Visualizzazione feed! testo, quindi mi chiedo se qualcosa è cambiato con le versioni recenti. – Ian

risposta

54

Il tuo approccio dovrebbe funzionare alla grande. Nelle grandi app su Fb, evitiamo di chiamare lo require() per il componente di scena finché non lo rendiamo, il che può far risparmiare un po 'di tempo di avvio.

La funzione renderScene deve essere richiamata quando la scena viene prima inviata al Navigatore. Sarà anche chiamato per la scena attiva quando il Navigatore viene nuovamente sottoposto a rendering. Se vedi renderScene viene chiamato più volte dopo un push, allora probabilmente è un bug.

Il navigatore è ancora in fase di sviluppo, ma se si riscontrano problemi con esso, archiviare su github e taggatemi! (@ericvicenti)

+0

Ciao @Eric, per favore guarda su questo link: - https://stackoverflow.com/questions/44538306/navigate-user-to-new-screen-on-listitem-click-react-native – sid

2

Navigator è deprecato ora in RN 0.44.0 è possibile utilizzare react-native-deprecated-custom-components invece per sostenere la vostra applicazione esistente che utilizza Navigator.

0

Il componente del navigatore è obsoleto. Potresti usare react-native-router-flux di askonov, ha una grande varietà e supporta molte animazioni ed è efficiente

Problemi correlati