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, 5 meses, 5 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 -
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 usarthis.state
en la propiedadnavigationState
del componenteTabView
.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