Error tratando de configurar pestañas en reactr-native

Necesito una mano para corregir mi código. Quiero mostrar una página con 3 pestañas con la vista reactria-native-tab-view y no sé por qué tengo un error. ¿Podrías ayudarme a encontrar dónde está atascado? Lo que puede parecer obvio y fácil para usted puede no ser fácil para mí, así que por favor sea indulgente :) Muchas gracias por su ayuda y su tiempo.

import * as React from 'react';
import { Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
import Information from '../Information';
import Photos from '../Photos';
import Stock from '../Stock';
import { getProducts } from '../../../../src/common/Preferences';
import styles from '../../../../assets/styles';
import i18n from '../../../../src/i18n';

const FirstRoute = () => (
  
);

const SecondRoute = () => (
  
);
const ThirdRoute = () => (
  
);

const initialLayout = { width: Dimensions.get('window').width };

export default class ProductDetails extends React.Component {
 constructor(props) {
    super(props);
      this.state = {
       // productId: (props.navigation.state.params && props.navigation.state.params.productId ? props.navigation.state.params.productId : -1),
        index: 0,
        routes: [{ key: '1', title: i18n.t("information.title"),icon: 'ios-paper', }, {icon: 'ios-paper', key: '2', title: i18n.t("stock.title") }, {icon: 'ios-paper', key: '3', title: i18n.t("photos.title") }],
    };
 }

  _handleIndexChange = index => {
    this.setState({index})
  };

 _renderScene = SceneMap({
    '1': FirstRoute,
    '2': SecondRoute,
    '3': ThirdRoute,
  });

render() {
  return (    
        
    );
  };
}

Tengo:

TipoError: _this.props.onIndexChange no es una función. (In) '_ this.props.onIndexChange(index)', '_this.props.onIndexChange' es indefinidos)

Pregunta hecha hace 3 años, 4 meses, 28 días - Por techwizkid

2 Respuestas:

• El error que estás experimentando se debe a que estás pasando incorrectamente las props en el componente TabView de react-native-tab-view. El error específico es que estás utilizando las props incorrectas para configurar el TabView.

  Aquí te muestro cómo corregirlo:

  • En lugar de utilizar `initiallayout`, debes utilizar `initialLayout` (con L mayúscula) para pasar la variable al componente TabView.

  • Para manejar el cambio de índice de las pestañas, debes utilizar `onIndexChange` en lugar de `onRequestChangeTab`.

  • Elimina la prop `useNativeDriver` ya que no es necesaria en este contexto.

  Aquí tienes el código corregido:

  jsx
  import * as React from 'react';
  import { Dimensions } from 'react-native';
  import { TabView, SceneMap } from 'react-native-tab-view';
  import Information from '../Information';
  import Photos from '../Photos';
  import Stock from '../Stock';
  import { getProducts } from '../../../../src/common/Preferences';
  import styles from '../../../../assets/styles';
  import i18n from '../../../../src/i18n';
  
  const FirstRoute = () => (
    
  );
  
  const SecondRoute = () => (
    
  );
  const ThirdRoute = () => (
    
  );
  
  const initialLayout = { width: Dimensions.get('window').width };
  
  export default class ProductDetails extends React.Component {
   constructor(props) {
      super(props);
        this.state = {
          index: 0,
          routes: [{ key: '1', title: i18n.t("information.title"), icon: 'ios-paper' }, { key: '2', title: i18n.t("stock.title"), icon: 'ios-paper' }, { key: '3', title: i18n.t("photos.title"), icon: 'ios-paper' }],
      };
   }
  
    _handleIndexChange = index => {
      this.setState({ index });
    };
  
   _renderScene = SceneMap({
      '1': FirstRoute,
      '2': SecondRoute,
      '3': ThirdRoute,
    });
  
    render() {
      return (    
            
      );
    }
  }
  

  Con estas correcciones, el error que mencionaste debería resolverse y deberías poder trabajar con las pestañas en tu aplicación de React Native. ¡Espero que esta respuesta te haya sido útil! Si tienes alguna otra pregunta o duda, no dudes en decírmelo.

  Respondida el Dec 19, 2020 a las 10:49 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El error que estás obteniendo se debe a un error tipográfico en la sintaxis de React Native. En lugar de "{this.state}", deberías usar this.state en la propiedad navigationState del componente TabView.

  Aquí tienes el código corregido:

  jsx
  import * as React from 'react';
  import { Dimensions } from 'react-native';
  import { TabView, SceneMap } from 'react-native-tab-view';
  import Information from '../Information';
  import Photos from '../Photos';
  import Stock from '../Stock';
  import { getProducts } from '../../../../src/common/Preferences';
  import styles from '../../../../assets/styles';
  import i18n from '../../../../src/i18n';
  
  const FirstRoute = () => (
    
  );
  
  const SecondRoute = () => (
    
  );
  const ThirdRoute = () => (
    
  );
  
  const initialLayout = { width: Dimensions.get('window').width };
  
  export default class ProductDetails extends React.Component {
   constructor(props) {
      super(props);
        this.state = {
         // productId: (props.navigation.state.params && props.navigation.state.params.productId ? props.navigation.state.params.productId : -1),
          index: 0,
          routes: [{ key: '1', title: i18n.t("information.title"),icon: 'ios-paper', }, {icon: 'ios-paper', key: '2', title: i18n.t("stock.title") }, {icon: 'ios-paper', key: '3', title: i18n.t("photos.title") }],
      };
   }
  
    _handleIndexChange = index => {
      this.setState({index})
    };
  
   _renderScene = SceneMap({
      '1': FirstRoute,
      '2': SecondRoute,
      '3': ThirdRoute,
    });
  
  render() {
    return (    
          
      );
    };
  }
  

  Asegúrate de que tu código coincida exactamente con este código corregido y vuelve a ejecutar tu aplicación. El error debería desaparecer y tus pestañas deberían mostrarse correctamente.

  Respondida el Dec 19, 2020 a las 11:00 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---