Javascript Girl
  1. Javascript Girl
  3. React-Native – Navigation personnalisée avec le composant Navigator
Intereting Posts
Plugin Maven pour version et minify javascript Erreur du module non trouvé dans le test de l'unité AngularJS Javascript Regex pour remplacer le texte NOT in html attributes Comment positionner un DIV dans des coordonnées spécifiques? Prenez l'ID vidéo de Youtube avec Jquery & .match () Trouver la dimensionnalité d'un tableau javascript D3.js Traçage de multiples jeux de données à partir de fichiers séparés Comment spécifier le fuseau horaire lors de la création d'une date JavaScript? Comment compter les mots dans une zone de texte par jquery et retourner cette valeur Comment passer un rappel en tant que paramètre dans une autre fonction Case à cocher, cochez toutes les options Javascript: simulez un clic sur un lien La méthode JavaScript setInterval () provoque-t-elle une fuite de mémoire? Méthode préférée pour recharger la page avec JavaScript? Convertir l'élément jQuery en un élément dom régulier

React-Native – Navigation personnalisée avec le composant Navigator

J'explore les possibilités de React Native tout en développant une application de démonstration avec la navigation personnalisée entre les vues avec l'aide du composant Navigator – http://facebook.github.io/react-native/docs/navigator.html#content

La classe d'application principale rend navigateur et inside renderScene renvoie le composant passé: 

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

Pour l'instant, l'application contient 2 vues: 

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

Ce que je veux comprendre, c'est –

  • Je vois dans les journaux que, lorsque vous appuyez sur "aller à l'alimentation", renderScene est appelé plusieurs fois, bien que la vue soit correcte une fois. Est-ce comment fonctionne l'animation? 

     index.ios.js:57 Object {name: 'WelcomeView', component: function} index.ios.js:57 Object {name: 'FeedView', component: function} // renders Feed View

  • Généralement, mon approche est-elle conforme à la manière réactive, ou cela peut-il se faire mieux?

Ce que je veux atteindre est similaire à NavigatorIOS mais sans barre de navigation (cependant, certaines vues auront leur propre barre de navigation personnalisée).

Votre approche devrait fonctionner très bien. Dans les grandes applications à Fb, nous évitons d'appeler require() pour le composant de scène jusqu'à ce que nous le rendions, ce qui peut économiser un peu le temps de démarrage.

La fonction renderScene doit être appelée lorsque la scène est d'abord déplacée vers Navigator. Il sera également appelé pour la scène active lorsque le navigateur sera redessiné. Si vous voyez que le renderScene est appelé plusieurs fois après une push , c'est probablement un bug.

Le navigateur est encore un travail en cours, mais si vous rencontrez des problèmes, veuillez déposer sur github et marquer moi! (@ericvicenti)