undefined is not a function (evaluating '_this2.tabValue()') react native app 错误

Question

我正在尝试在 React Native 中实现选项卡布局。布局已呈现。但是在其中一个选项卡中，当我单击某个项目时，它无法找到该功能。我遵循了正确的语法，但找不到问题所在。请帮助

我正在尝试在 React Native 中实现选项卡布局。布局已呈现。但是在其中一个选项卡中，当我单击某个项目时，它无法找到该功能。我遵循了正确的语法，但找不到问题所在。请帮忙我的Class代码

class TabViewExample extends Component {

  state = {
    index: 0,
    routes: [
      {
        key: '1',
        title: 'Chats'
      }, {
        key: '2',
        title: 'Contacts'
      }, {
        key: '3',
        title: 'Status'
      }
    ],
    navigate: this.props.navigation
  };

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

  _renderHeader = props => <TabBar {...props}/>;

  _renderScene = SceneMap({'1': this.renderFirst, '2': this.renderSecond, '3': this.renderThird});

  static navigationOptions = {
    title: 'Welcome',
    header: null
  };
  renderFirst()
  {
    return (
      <View
        style={[
        styles.container, {
          backgroundColor: '#EF9ADD'
        }
      ]}>
        <View>
          <Text style={styles.welcome}>
            Welcome to React Native!
          </Text>
        </View>
      </View>

    );
  }

  renderSecond()
  {
    return (
      <View
        style={[
        styles.container, {
          backgroundColor: '#0BEFF6'
        }
      ]}>
        <View style={styles.contacts}>
          <SectionList
            sections={[
            {
              title: 'N',
              data: ['Nitesh']
            }, {
              title: 'P',
              data: ['Paras']
            }, {
              title: 'S',
              data: ['Simran', 'Shikha', 'Sunil']
            }
          ]}
            renderItem={({item}) => <TouchableOpacity activeOpacity={.5} onPress={() => this.tabValue(item)}> // undefinded function error is here
            <Text style={styles.item}>{item}</Text>
          </TouchableOpacity>}
            renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}/>
        </View>
      </View>

    );
  }

  renderThird()
  {
    return (
      <View
        style={[
        styles.container, {
          backgroundColor: '#E3A8FC'
        }
      ]}>
        <View>
          <Text style={styles.welcome}>
            Welcome to React Native!
          </Text>
        </View>
      </View>

    );
  }

  render() {
    return (<TabViewAnimated
      style={styles.container}
      navigationState={this.state}
      renderScene={this._renderScene}
      renderHeader={this._renderHeader}
      onIndexChange={this._handleIndexChange}/>);
  }

  tabValue = (value) =>{
    const {navigate} = this.props.navigation;

    console.log('Paras');
    switch (value) {

      case 'Paras':
        console.log("paras Clicked!");
        navigate('ParasPage')
        break;

      case 'Nitesh':
        console.log("Nitesh");
        //this.props.navigation.navigate('NiteshPage')
        navigate('NiteshPage');
        break;

      case 'Simran':
        console.log("Nitesh");
        navigate('NiteshPage');
        break;

      case 'Shikha':
        console.log("Nitesh");
        //this.props.navigation.navigate('NiteshPage')
        break;

      case 'Sunil':
        console.log("Nitesh");
        //this.props.navigation.navigate('NiteshPage')
        break;
    }
  }

}

Answer 1

您有绑定问题。在创建 SceneMap

时将 renderBlah 方法转换为属性 renderFirst = () => {...} 或将它们绑定到实例

_renderScene = SceneMap({'1': this.renderFirst.bind(this)...)

undefined is not a function (evaluating '_this2.tabValue()') react native app 错误

undefined is not a function (evaluating '_this2.tabValue()') error in react native app

reactjs

react-native

android-tablayout