react-native Navigator.NavigationBar - dove sono i documenti?

Question

Ho visto alcuni esempi online utilizzando Navigator.NavigationBar. Sembra a portata di mano ma non so come usarlo. Ci sono documenti ovunque?

Answer 1

Ufficialmente non c'è una guida Navigator.Navigation Bar. Ma guardando su internet puoi trovare esempi di come funziona. Di seguito è riportato un esempio che ho utilizzato per uno dei miei progetti.

var PageOne = require('./pageone'), 
    PageTwo = require('./pagetwo'); 


var NavigationBarRouteMapper = { 
    LeftButton: function(route, navigator, index, navState){ 
    return(
     <Text>{ route.leftButton }</Text> 
    ) 
    }, 
    Title: function(route, navigator, index, navState){ 
    return(
     <Text>{ route.title }</Text> 
    ) 
    }, 
    RightButton: function(route, navigator, index, navState){ 
    return(
     <Text>{ route.rightButton }</Text> 
    ) 
    } 
} 

var App = React.createClass({ 

    renderScene: function(route, nav) { 
    switch (route.id) { 
     case 'PageOne': 
     return <PageOne navigator={ nav } title={ "PageOne" } /> 
     case 'PageTwo': 
     return <PageTwo navigator={ nav } leftButton={ "Back" } title={ "PageTwo" } />; 
    } 
    }, 

    render: function() { 
    return (
     <Navigator 
     initialRoute={{ id: 'PageOne', title: 'PageOne' }} 
     renderScene={ this.renderScene } 
     configureScene={(route) => { 
      if (route.sceneConfig) { 
      return route.sceneConfig; 
      } 
      return Navigator.SceneConfigs.FloatFromRight; 
     }} 
     navigationBar={ 
      <Navigator.NavigationBar 
      routeMapper={ NavigationBarRouteMapper } 
      /> 
     } 
     /> 
    ); 
    }, 
}); 

Answer 2

Vorrei anche aggiungere alla cassa l'interfaccia utente Explorer negli esempi che mostrano come usarlo. UIExplorer Navigator -

MODIFICA: React native ha svolto un buon lavoro aggiornando i propri documenti. Ecco la documentazione per il navigatore: navigator docs

AGGIORNAMENTO: fai un favore a te stesso e usa qualcosa come la navigazione reattiva. Questi collegamenti verranno interrotti a causa di MOLTI aggiornamenti a RN.

Answer 3

Aggiornamenti al 2017: Official documentation of React Native consiglia di utilizzare la libreria react-navigation.

variabile Setup:

import { 
    StackNavigator, 
} from 'react-navigation'; 

const App = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    Profile: { screen: ProfileScreen }, 
}); 

Esempio:

class HomeScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 
    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <Button 
     title="Go to Jane's profile" 
     onPress={() => 
      navigate('Profile', { name: 'Jane' }) 
     } 
     /> 
    ); 
    } 
} 

leggere la documentazione ufficiale per informazioni dettagliate.