首页 > 解决方案 > 尝试在 react-native 中设置选项卡时出错

问题描述

我需要一只手来纠正我的代码。我想用 react-native-tab-view 显示一个带有 3 个选项卡的页面,但我不知道为什么会出错。你能帮我找出卡在哪里吗?对您来说似乎很明显和容易的事情对我来说可能并不容易,所以请放纵 :) 非常感谢您的帮助和时间。

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 = () => (
  <Information style={styles.scene} />
);

const SecondRoute = () => (
  <Stock style={styles.scene} />
);
const ThirdRoute = () => (
  <Photos style={styles.scene} />
);

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 (    
    <TabView      
      navigationState={this.state}
      renderScene={this._renderScene}
      initialLayout={initialLayout}
      onRequestChangeTab={this._handleIndexChange}
        useNativeDriver
    />    
    );
  };
}

我得到:

TypeError:_this.props.onIndexChange 不是函数。(在 '_this.props.onIndexChange(index)' 中,'_this.props.onIndexChange' 未定义)

标签: react-nativetabsreact-native-tab-view

解决方案


推荐阅读