React-native-router-flux: Título dinámico

Creado en 19 feb. 2016  ·  23Comentarios  ·  Fuente: aksonov/react-native-router-flux

Hola,
Gracias por el gran módulo: ¿hay alguna forma de cambiar dinámicamente el estado de un título y la barra de navegación?

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

Y luego tendría un oyente que cambiaría el estado this.state.UserCredentialsNavBar 'verdadero' o 'falso' y this.state.title 'Algún título' o 'Algún otro título'.

Lo intenté pero no llegué a ninguna parte.

Gracias por adelantado.
: 0)

Comentario más útil

Gracias Aksonov.
Puede que no te esté entendiendo adecuadamente.
Entonces, por ejemplo, si quisiera cambiar el estado del título. Yo llamaría
Actions.refresh({title: 'Some other title'})
Muchas gracias por responderme.
: 0)

Todos 23 comentarios

Acabo de agregar soporte para establecer propiedades sin transición del navegador usando Actions.refresh (props), inténtelo (versión 2.3.1)

Gracias Aksonov.
Puede que no te esté entendiendo adecuadamente.
Entonces, por ejemplo, si quisiera cambiar el estado del título. Yo llamaría
Actions.refresh({title: 'Some other title'})
Muchas gracias por responderme.
: 0)

Mi mal, todo está funcionando muy bien. Muchas gracias aksonov por tu ayuda. Muy apreciado. : 0)

Me encuentro con un problema que parece un error aquí al configurar el título dinámicamente. Parece que Actions.refresh lo establece para todas las rutas, anulando sus títulos estáticos.

En mi caso, tengo una configuración de detalles maestros donde la ruta maestra tiene un título de apoyo y el título de la ruta detallada solo se establece dinámicamente. Cuando estoy en la ruta de detalle y el título cambia, lo que sucede es que tanto el título como el botón de retroceso cambian al mismo texto. Al volver al maestro, el título dinámico permanece activado (en lugar de volver a su título de esquema).

Soy nuevo en React Native, así que no estoy seguro de si esto es por diseño o no ...

¡Gracias!

¿Hay alguna manera de configurarlo para una escena específica incluso si no estoy actualmente en esa escena? es decir

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

@greatwitenorth ¿
por ejemplo, si está navegando a una vista con la tecla view2 , puede establecer el título con los accesorios como este

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

Mi problema fue que no estaba navegando a la escena que necesitaba su título actualizado. Mi pantalla actualizó la dirección del usuario, pero la dirección se mostró como un título en una pantalla completamente separada.

@greatwitenorth Me encontré con el mismo problema. ¿Cómo cambiar el título sin navegar a una nueva ruta con título cambiado?

Bien, debería haber leído mejor la documentación, es simplemente
Actions.refresh({title: 'new title'})

@greatwitenorth , ¿encontraste alguna solución decente?
Estoy obteniendo el título del estado, así que cada vez que cambia el estado, quiero que una vista específica tenga ese valor como título. A veces, las personas cambian el título y navegan a través del botón Atrás, en ese caso, parece que no puedo definir el parámetro {título:} (y pasar el valor de estado en la acción Atrás), ¿o me falta algo?

La actualización en uno de los métodos del ciclo de vida del componente (o en el renderizado) hace que la aplicación se bloquee, ya que probablemente entre en un bucle infinito debido a los cambios en las propiedades del estado.

Atentamente,

@JeroenNelen Tuve un problema similar y lo resolví poniendo la actualización en ComponentDidMount y estableciendo el estado en los reductores de Redux: ato una acción de Redux en cada acción del usuario que cambia el título, actualizo el estado de la aplicación y los accesorios que la actualización dice actualizar también.

Entonces, básicamente, algo como esta línea en ComponentDidMount:

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

@jondbm gracias por la sugerencia, pero hemos decidido cambiar a un navegador diferente.

Atentamente,

@JeroenNelen ¿Qué navegador estás usando en este momento? (Si no te importa compartir)

¿Por qué la siguiente configuración no se actualiza con el botón derecho? ¿console.log escribe el nuevo valor, pero el título correcto nunca se actualiza?

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 righttitle or right button?

¡El título!

Sugeriría usar la barra de navegación personalizada, con lo que quieras que esté en ella.

@jaynakus intente poner su rightTitle y onRight en su componente Scene en lugar de en el nivel superior RouterWithRedux, eso podría funcionar.

@jondbm ponerlos en la escena raíz no se resolvió, pero llamar a Actions.refresh () en componentWillReceiveProps funcionó;)

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

Esto es asombroso, ¿hay una manera limpia de hacer aparecer / desaparecer gradualmente el título cuando cambia? En mi caso, el título cambia cuando el usuario se desplaza más de 100px. Sería bueno atenuar la transición. Salud.

@greatwitenorth ¿
por ejemplo, si está navegando a una vista con la tecla view2 , puede establecer el título con los accesorios como este

`` js
Actions.view2 ({title: 'Mi nuevo título'})

¿Cómo podemos acceder a él en el archivo de instalación?

Si tengo una configuración 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>

Entonces Actions.task ({title: 'My New Title'}) o Actions.refresh ({title: "My New Title"}) no funcionan. ¿Cómo poner título o enviar algunas propiedades al tener un cajón?

¿Fue útil esta página
0 / 5 - 0 calificaciones