React-native-router-flux: Título Dinâmico

Criado em 19 fev. 2016  ·  23Comentários  ·  Fonte: aksonov/react-native-router-flux

Olá,
Obrigado pelo ótimo módulo - É uma maneira de alterar dinamicamente o estado de um título e da barra de navegação.

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

E então eu teria um ouvinte que mudaria o estado this.state.UserCredentialsNavBar 'true' ou 'false' e this.state.title 'Some title' ou 'Some other title'.

Eu tentei, mas não cheguei a lugar nenhum.

Desde já, obrigado.
: 0)

Comentários muito úteis

Obrigado aksonov.
Posso não estar entendendo você corretamente.
Então, por exemplo, se eu quisesse mudar o estado do título. Eu chamaria
Actions.refresh({title: 'Some other title'})
Muito obrigado por entrar em contato comigo.
: 0)

Todos 23 comentários

Acabei de adicionar suporte para definir propriedades sem transição do navegador usando Actions.refresh (props), tente (versão 2.3.1)

Obrigado aksonov.
Posso não estar entendendo você corretamente.
Então, por exemplo, se eu quisesse mudar o estado do título. Eu chamaria
Actions.refresh({title: 'Some other title'})
Muito obrigado por entrar em contato comigo.
: 0)

Meu mal, está tudo funcionando muito bem. Muito obrigado pela sua ajuda aksonov. Muito apreciado. : 0)

Estou tendo um problema que parece ser um bug aqui ao definir o título dinamicamente. Parece que Actions.refresh o define para todas as rotas, substituindo seus títulos estáticos.

No meu caso, tenho uma configuração de detalhes-mestre em que a rota mestre tem um suporte de título e o título da rota de detalhes é definido apenas dinamicamente. Quando estou na rota detalhada e o título muda, o que acontece é que tanto o título quanto o botão Voltar mudam para o mesmo texto. Ao voltar para o mestre, o título dinâmico permanece (em vez de voltar para o título do esquema).

Eu sou novo no React Native, então não tenho certeza se isso é intencional ou não ...?

Obrigado!

Existe uma maneira de defini-lo para uma cena específica, mesmo que eu não esteja atualmente nessa cena? ie

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

@greatwitenorth qual é o seu caso de uso exato?
por exemplo, se você estiver navegando para uma visão com a tecla view2 você pode definir o título com os adereços como este

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

Meu problema era que eu não estava navegando para a cena que precisava de seu título atualizado. Minha tela atualizou o endereço do usuário, mas o endereço foi exibido como um título em uma tela completamente separada.

@greatwitenorth Eu tive o mesmo problema. Como alterar o título sem navegar para uma nova rota com o título alterado?

OK, eu deveria ter lido a documentação melhor, é simplesmente
Actions.refresh({title: 'new title'})

@greatwitenorth você encontrou alguma solução decente?
Estou obtendo o título do estado, portanto, sempre que o estado muda, quero que uma visualização específica tenha esse valor como um título. Às vezes, as pessoas mudam o título e navegam pelo botão Voltar; nesse caso, não consigo definir o parâmetro {title:} (e passar o valor do estado na ação anterior) ou estou perdendo alguma coisa?

Atualizar em um dos métodos de ciclo de vida do componente (ou na renderização) faz o aplicativo travar, pois provavelmente entra em um loop infinito devido à alteração das propriedades de estado.

Atenciosamente,

@JeroenNelen Eu tive um problema semelhante e resolvi colocando a atualização em ComponentDidMount e definindo o estado em redutores Redux - eu vinculo uma ação Redux a cada ação do usuário que muda o título, atualizo o estado do aplicativo e os adereços que a atualização lê atualizar também.

Então, basicamente, algo como esta linha em ComponentDidMount:

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

@jondbm obrigado pela sugestão, mas decidimos mudar para um navegador diferente.

Atenciosamente,

@JeroenNelen, qual navegador você está usando agora? (Se você não se importa em compartilhar)

Por que a configuração abaixo não está atualizando o botão direito? console.log grava o novo valor, mas o título correto nunca é atualizado?

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 direito ou botão direito?

O título!

Eu sugeriria o uso de uma barra de navegação personalizada, com o que você quiser.

@jaynakus tente colocar seu rightTitle e onRight em seu componente Scene em vez de no nível superior do RouterWithRedux, isso pode funcionar.

@jondbm colocá-los na cena raiz não resolveu, mas chamar Actions.refresh () em componentWillReceiveProps resolveu;)

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

Isso é incrível. Existe uma maneira limpa de aumentar ou diminuir o brilho do título quando ele muda? No meu caso, tenho a troca de título quando o usuário rola mais de 100px. Seria bom diminuir a transição. Felicidades.

@greatwitenorth qual é o seu caso de uso exato?
por exemplo, se você estiver navegando para uma visão com a tecla view2 você pode definir o título com os adereços como este

`` `js
Actions.view2 ({title: 'Meu novo título'})

Como podemos acessá-lo no arquivo de configuração?

Se eu tiver uma configuração como esta:

<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>

Então Actions.task ({title: 'My New Title'}) ou Actions.refresh ({title: "My New Title"}) não funciona. Como definir título ou enviar alguns imóveis quando tem gaveta?

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

rafaelcorreiapoli picture rafaelcorreiapoli  ·  3Comentários

GCour picture GCour  ·  3Comentários

llgoer picture llgoer  ·  3Comentários

sylvainbaronnet picture sylvainbaronnet  ·  3Comentários

wootwoot1234 picture wootwoot1234  ·  3Comentários