Expo报错TypeError:Cannot read property 'props' of undefined的修复求助

这个错误的核心原因很明确：你的SwipeableFlatlist组件里的renderItem和renderHiddenItem方法没有返回任何React元素，导致SwipeListView内部尝试读取VisibleComponent.props时，拿到的是undefined，直接抛出了错误。

下面是具体的修复步骤：

1. 修复renderItem方法 #

你当前的renderItem只是写了JSX但没有返回它，要么加上return关键字，要么用箭头函数的隐式返回（把JSX用括号包裹）：

方式一：显式return #

renderItem = data => {
  return (
    <ListItem 
      leftElement={<Icon name="book" type="font-awesome" color="#696969" />}
      title={data.item.book_name}
      titleStyle={{color: 'black', fontWeight: 'bold'}}
      subtitle={data.item.message}
      bottomDivider 
    />
  );
};

方式二：隐式返回 #

renderItem = data => (
  <ListItem 
    leftElement={<Icon name="book" type="font-awesome" color="#696969" />}
    title={data.item.book_name}
    titleStyle={{color: 'black', fontWeight: 'bold'}}
    subtitle={data.item.message}
    bottomDivider 
  />
);

2. 修复renderHiddenItem方法 #

同样的问题，这个方法也没有返回JSX，而且参数顺序不对（SwipeListView的renderHiddenItem接收的是(data, rowMap)，不是(data, item)），同时可以给按钮加个文本提示让用户知道功能：

renderHiddenItem = (data, rowMap) => (
  <View style={styles.rowBack}>
    <View style={[styles.backRightBtn, styles.backRightBtnRight]}>
      <Text style={styles.backTextWhite}>标记已读</Text>
    </View>
  </View>
);

3. 补充缺失的Dimensions导入 #

在SwipeableFlatlist.js的顶部导入语句里，你漏掉了Dimensions，但在onSwipeValueChange里用到了它，所以需要补上：

import {StyleSheet, Text, View, Dimensions} from 'react-native';

4. 修正SwipeListView的拼写错误 #

你把previewKey写成了previewkey（小写k），这会导致组件无法识别这个prop，改成正确的驼峰写法：

<SwipeListView 
  data={this.state.allNotifications}
  renderItem={this.renderItem}
  renderHiddenItem={this.renderHiddenItem}
  leftOpenValue={75}
  rightOpenValue={-150}
  previewKey={'0'} // 修正为大写K
  previewOpenValue={-40}
  previewOpenDelay={3000}
/>

完成这些修复后，SwipeListView就能正确获取到需要渲染的组件，不会再出现Cannot read property 'props' of undefined的错误了。

内容的提问来源于stack exchange，提问作者Tanzeel Rahman