React Native SwiperFlatList滑动其他元素时首个条目隐藏项不隐藏问题

问题解决方法 #

你遇到的首个TextInput滑动后无法自动关闭的问题，修改以下两处即可修复：

1. 给SwipeListView补充两个必填配置项：keyExtractor和closeOnRowOpen，前者用于列表识别唯一行，后者控制打开新行时自动关闭已有打开的行。
2. 移除renderItem中TouchableHighlight上的key属性，列表项的key由keyExtractor统一声明即可，重复绑定会导致状态同步异常。

修改后的核心代码如下：

// 新增项时确保key唯一，示例onPressAddBtn逻辑参考：
const onPressAddBtn = () => {
  setInputField([...inputField, {
    col1: '',
    key: inputField.length // 保证key全局唯一即可
  }])
}

<SwipeListView
  data={inputField}
  renderItem={data => renderItem(data)}
  renderHiddenItem={data => renderHiddenItem(data)}
  leftOpenValue={55}
  rightOpenValue={-100}
  disableRightSwipe={true}
  // 新增以下两个配置
  keyExtractor={(item) => item.key.toString()}
  closeOnRowOpen={true}
  ListHeaderComponent={
    <View style={[styles.headingContainer]}>
      <Text style={[styles.headingText]}>{Props.inputHeading}</Text>
    </View>
  }
  ListFooterComponent={
    <View style={styles.buttonContainer}>
      <TouchableOpacity
        style={styles.addBtn}
        activeOpacity={0.7}
        onPress={onPressAddBtn}>
        <Text style={styles.BtnText}>Add</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.submitBtn} activeOpacity={0.7}>
        <Text style={styles.BtnText}>Submit</Text>
      </TouchableOpacity>
    </View>
  }
  style={{height: Dimensions.get('screen').height / 1.3}}
/>

// 优化后的renderItem，移除冗余key
const renderItem = (data: any) => {
  return (
    <TouchableHighlight>
      <TextInput
        placeholder="Hello"
        onChangeText={e => handleChange(data.item.key, 'col1', e)}
        value={data.item.col1}
        style={[styles.textInput, Props.textInputStyle]}
      />
    </TouchableHighlight>
  );
};

修改后滑动任意行时，已打开的首行删除按钮会自动关闭，所有行的滑动逻辑会完全一致。

内容的提问来源于stack exchange，提问作者Athavan T