未定义是不是一个函数（评估'_this2.tabValue（）'）反应原生应用程序中的错误

Question

我试图在反应本机实现选项卡布局。布局被渲染。但在其中一个选项卡中，当我点击一个项目时，它无法找到该功能。 我遵循正确的语法，但无法找到问题。请帮助

我正试图在原生反应中实现选项卡布局。布局被渲染。但在其中一个选项卡中，当我点击一个项目时，它无法找到该功能。 我遵循正确的语法，但无法找到问题。请帮助 我的班级代码

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

您有绑定问题。无论是转换renderBlah方法为属性renderFirst =() => {...}或将它们绑定到实例创建SceneMap

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