React Native--_this.*** is not a function

最新推荐文章于 2025-05-28 11:55:05 发布

原创最新推荐文章于 2025-05-28 11:55:05 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react native

WEB 专栏收录该内容

43 篇文章

订阅专栏

本文介绍在React Native中使用列表组件如FlatList时遇到的this指向问题及解决方法。当通过this调用方法时会出现this不是函数的错误，文章提供了解决方案：在传递给renderItem的方法上使用bind(this)。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在react native使用<ListView><FlatList><SectionList>等组件列表时，经常会报错this.**不是一个方法，然而我们明明已经声明了该方法，这是因为在该组件中的this并不是你的class中的this。例如我在使用FlatList渲染一个组件：

<FlatList
  ref={ref=>flatList=ref}
  keyExtractor = {(item, index) => index.toString()}
  data={this.state.rowNews}                         //数据源
  renderItem={this.renderItem}                       //定义每条数据的渲染方法
/>

其中通过this.renderItem方法来渲染每条数据：

renderItem(item){
  return(
    <TouchableOpacity activeOpacity={0.5} onPress={()=>this.showDetail()}>
      <View style={styles.newsItem}>
        <Image style={styles.newsImg} source={{uri:item.item.imgsrc}} />
        <View style={styles.newsText}>
          <Text style={styles.newsTitle}>{item.item.title}</Text>
          <Text style={styles.newsDigest}>{item.item.digest}</Text>
        </View>
      </View>
    </TouchableOpacity>
  )
}