React-native-router-flux: Titre dynamique

Créé le 19 févr. 2016  ·  23Commentaires  ·  Source: aksonov/react-native-router-flux

Bonjour,
Merci pour l'excellent module - Est-il possible de modifier dynamiquement l'état d'un titre et d'une barre de navigation.

Par example.
<Route key="UserCredentials" name="UserCredentials" hideNavBar={this.state.UserCredentialsNavBar} component={UserCredentials} initial={ false } title={this.state.title} schema="withoutAnimation" />

Et puis j'aurais un auditeur qui changerait l'état this.state.UserCredentialsNavBar 'true' ou 'false' et this.state.title 'Un titre' ou 'Un autre titre'.

J'ai essayé mais je n'ai rien trouvé.

Merci d'avance.
:0)

Commentaire le plus utile

Merci Aksonov.
Je ne te comprends peut-être pas bien.
Donc, par exemple si je voulais changer l'état du titre. J'appellerais
Actions.refresh({title: 'Some other title'})
Merci beaucoup d'être revenu vers moi.
:0)

Tous les 23 commentaires

Je viens d'ajouter la prise en charge de la définition des propriétés sans transition de navigateur à l'aide d'Actions.refresh(props), veuillez l'essayer (version 2.3.1)

Merci Aksonov.
Je ne te comprends peut-être pas bien.
Donc, par exemple si je voulais changer l'état du titre. J'appellerais
Actions.refresh({title: 'Some other title'})
Merci beaucoup d'être revenu vers moi.
:0)

Mon mauvais, tout fonctionne très bien. Merci beaucoup pour votre aide Aksonov. Très appréciée. :0)

Je rencontre un problème qui semble être un bogue ici avec la définition dynamique du titre. Il semble que Actions.refresh le définisse pour toutes les routes, en remplaçant leurs titres statiques.

Dans mon cas, j'ai une configuration maître-détail dans laquelle la route principale a un titre et le titre de la route détaillée n'est défini que de manière dynamique. Lorsque je suis dans la route détaillée et que le titre change, ce qui se passe, c'est que le titre et le bouton de retour deviennent le même texte. Lors du retour au master, le titre dynamique reste activé (plutôt que de revenir à son titre de schéma).

Je suis nouveau sur React Native, donc je ne sais pas si c'est par conception ou non...?

Merci!

Existe-t-il un moyen de le définir pour une scène spécifique même si je ne suis pas actuellement sur cette scène ? c'est à dire

Actions.refresh({key: 'home', title: 'My new title'})

@greatwitenorth quel est votre cas d'utilisation exact ?
par exemple, si vous naviguez vers une vue avec la clé view2 vous pouvez définir le titre avec les accessoires comme ceci

Actions.view2({ title: 'My New Title' })

Mon problème était que je ne naviguais pas vers la scène qui avait besoin que son titre soit mis à jour. Mon écran a mis à jour l'adresse de l'utilisateur, mais l'adresse a été affichée en tant que titre sur un écran complètement séparé.

@greatwitenorth J'ai rencontré le même problème. Comment changer le titre sans naviguer vers un nouvel itinéraire avec un titre modifié ?

OK, j'aurais dû mieux lire la documentation, c'est simplement
Actions.refresh({title: 'new title'})

@greatwitenorth avez-vous trouvé une solution décente ?
Je récupère le titre de l'état, donc chaque fois que l'état change, je veux qu'une vue spécifique ait cette valeur comme titre. Parfois, les gens changent le titre et naviguent via le bouton de retour, dans ce cas, je n'arrive pas à définir le paramètre {title: } (et à transmettre la valeur d'état dans l'action de retour), ou est-ce que je manque quelque chose ?

L'actualisation dans l'une des méthodes de cycle de vie du composant (ou dans le rendu) fait planter l'application car elle entre probablement dans une boucle infinie en raison de la modification des propriétés d'état.

Sincères amitiés,

@JeroenNelen J'ai eu un problème similaire et je l'ai résolu en mettant l'actualisation dans ComponentDidMount et en définissant l'état dans les réducteurs Redux - j'associe une action Redux à chaque action utilisateur qui modifie le titre, met à jour l'état de l'application et les accessoires l'actualisation lit la mise à jour trop.

Donc, en gros, quelque chose comme cette ligne dans ComponentDidMount :

Actions.refresh({title: this.props.state.myapp.myvalue})

@jondbm merci pour la suggestion, mais nous avons décidé de passer à un autre navigateur.

Sincères amitiés,

@JeroenNelen, quel navigateur utilisez-vous actuellement ? (Si cela ne vous dérange pas de partager)

Pourquoi la configuration ci-dessous ne rafraîchit pas le bouton droit ? console.log écrit la nouvelle valeur, mais le bon titre n'est jamais actualisé ?

const RouterWithRedux = connect()(Router);

export class App extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    let title = '(' + this.props.basket.length + ')';
    console.log(title);
    return (
      <RouterWithRedux rightTitle={title} onRight={() => alert('All right')}>
        <Scene key="root">
          <Scene key="home" component={Main} title="Main"/>
          <Scene key="page1" component={SomePage} title="SomePage"/>
        </Scene>
      </RouterWithRedux>
    );
  }
}
App.propTypes = {
  dispatch: PropTypes.func.isRequired
};

// Wrap the component to inject dispatch and state into it
export default connect(
  state => {
    return {basket: state.basket.items}
  }
)(App);

@jaynakus titre droit ou bouton droit ?

Le titre!

Je suggérerais d'utiliser la barre de navigation personnalisée, avec tout ce que vous voulez y être.

@jaynakus essayez de mettre votre rightTitle et onRight dans votre composant Scene plutôt qu'au niveau supérieur RouterWithRedux, cela pourrait fonctionner.

@jondbm les mettre sur la scène racine n'a pas résolu, mais appeler Actions.refresh() dans componentWillReceiveProps a fait l'affaire ;)

const RouterWithRedux = connect()(Router);

export class App extends Component {

  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.basket.length !== nextProps.basket.length) {
      console.log(nextProps.basket.length);
      let title = '(' + nextProps.basket.length + ')';
      Actions.refresh({rightTitle: title});
    }
  }

  render() {
    let title = '(' + this.props.basket.length + ')';
    return (
      <RouterWithRedux>
        <Scene key="root" rightTitle={title} onRight={() => alert('All right')}>
          <Scene key="home" component={Main} title="Main"/>
          <Scene key="page1" component={SomePage} title="SomePage"/>
        </Scene>
      </RouterWithRedux>
    );
  }
}
App.propTypes = {
  dispatch: PropTypes.func.isRequired
};

// Wrap the component to inject dispatch and state into it
export default connect(
  state => {
    return {basket: state.basket.items}
  }
)(App);

C'est génial, y a-t-il un moyen propre de faire apparaître / disparaître le titre lorsqu'il change ? Dans mon cas, le titre change lorsque l'utilisateur fait défiler plus de 100 pixels. Ce serait bien d'estomper la transition. Acclamations.

@greatwitenorth quel est votre cas d'utilisation exact ?
par exemple, si vous naviguez vers une vue avec la clé view2 vous pouvez définir le titre avec les accessoires comme ceci

```js
Actions.view2({ title : 'Mon nouveau titre' })

Comment pouvons-nous y accéder dans le fichier d'installation?

Si j'ai une configuration comme celle-ci :

<Router>
                    <Scene key="root" navBar={NavBar}>
                        <Scene
                            hideNavBar
                            key="login"
                            component={Login}
                            initial
                        />

                        <Scene drawer
                               drawerPosition="right" drawerWidth={300}
                               key="task"
                               contentComponent={DrawerView}
                               drawerIcon={drawerIcon}
                               rightButtonImage="menu"
                               onRight={() => {
                                   Actions.drawerOpen()
                               }} hideNavBar
                        >

                            <Scene key="taskInner"
                                   leftButtonImage="arrow-back"
                                   component={TaskView}
                                   onLeft={() => {
                                       Actions.popTo('tasksList')
                                   }}
                            />
                        </Scene>

                    </Scene>
</Router>

Ensuite, Actions.task({ title: 'My New Title' }) ou Actions.refresh({title: "My New Title"}) ne fonctionne pas. Comment définir le titre ou envoyer certaines propriétés lorsqu'on a un tiroir ?

Cette page vous a été utile?
0 / 5 - 0 notes