Reaccionar condicional Render y barra de navegación

votos
4

Yo estoy controlando qué componente se debe mostrar en mi pantalla de aplicaciones a través del estado y una sentencia switch en la función render principal. Estoy escribiendo esto en reaccionar nativo pero esto es una pregunta reaccionar estructura.

También tengo un componente barra de navegación que lo ideal sería solamente reRender cuando el usuario hace clic en un enlace en la barra de navegación en sí, pero no sé de una gran manera de hacer esto con la forma en que tengo la configuración sentencia switch ahora, parece que voy a tener que regenere la barra de navegación cada vez dependiendo de qué condición se cumple por el estado.

Mi pregunta es, ¿hay alguna manera de que todavía puedo utilizar Procesamiento condicional de componentes en el método render como que estoy abajo y tener un componente que siempre se representa en la parte superior de la pantalla como la barra de navegación? Sé que esto es posible con cosas como Reaccionar router, pero hay una mejor manera de estructurarlo sin utilizar una herramienta como Reaccionar router o tener que regenere el componente barra de navegación cada vez?

import React from 'react';

import GPS from './GPS/gps';
import Home from './Home';
import Photo from './Camera/Photo';

export default class App extends React.Component {
  constructor() {
    super();

    this.state = {
      hasCameraPermission: null,
      type: Camera.Constants.Type.back,
      currentView: null,
      currentImage: null,
      navigation: 'Overview'
    };

    this.updateNavigation = this.updateNavigation.bind(this);
  }

  updateNavigation(view) { //Update view function
    this.setState({currentView: view});
  }


  render() {
    const { currentView } = this.state;

    switch(currentView) {
      case null:
      return (
        <Home updateNav={this.updateNavigation} />
        );
        break;

      case 'GPS':
      return (
        <View>
          <GPS />
          <Text onPress={() => this.setState({currentView: null})}>Back</Text>
        </View>
      );
        break;

      case 'Camera':
      return (
          <Photo updateNav={this.updateNavigation} />
       );
       break;

       case 'viewPicture':
       return (
        <View>
          <Image source={{uri: this.state.currentImage.uri}} style={{width: this.state.currentImage.width/10, height: this.state.currentImage.height/12}} />
        </View>
       );
       break;

    }
  }
}

Publicado el 19/09/2018 a las 17:02
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
3

Siempre mantenga rendir tanto como limpia.

Se puede utilizar el operador && para hacer lo mismo en lugar de utilizar el caso del interruptor. Utilizar && operador y comprobar cada caso y hacer que en consecuencia. Compruebe por debajo de código para una mejor comprensión.

render() {
    const { currentView } = this.state;
    return(
      {currentView == null && (
        <Home updateNav={this.updateNavigation} />
        )}
      {currentView == "GPS" && (
        <View>
          <GPS />
          <Text onPress={() => this.setState({currentView: null})}>Back</Text>
        </View>
        )}

      {currentView == "Camera" && (
        <View>
          <Photo updateNav={this.updateNavigation} />
        </View>
        )}

      {currentView == "viewPicture" && (
        <View>
          <Image source={{uri: this.state.currentImage.uri}} style={{width: this.state.currentImage.width/10, height: this.state.currentImage.height/12}} />
        </View>
        )}
    )

  }
Respondida el 19/09/2018 a las 17:12
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more