滑动另一个元素时第一个索引隐藏项目未隐藏 - 滑动器 FlatList React native

Posted 2023-02-16

【中文标题】滑动另一个元素时第一个索引隐藏项目未隐藏 - 滑动器 FlatList React native

【英文标题】：1st index hidden Item not hidding when swiping the another element - swiperFlatList React native

【发布时间】：2022-01-11 09:19:13

【问题描述】：

正如您在图片中看到的，我已经实现了通过按下按钮动态添加文本输入，一切正常，只有第一个文本输入隐藏项（删除按钮）在滑动其他文本输入时没有隐藏。

const initialState = 
  col1: '',
  key: 0,
;
const [inputField, setInputField] = useState<Values[]>([initialState]);

<SwipeListView
            data=inputField
            renderItem=data => renderItem(data)
            renderHiddenItem=data => renderHiddenItem(data)
            leftOpenValue=55
            rightOpenValue=-100
            disableRightSwipe=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
          />

const renderItem = (data: any) => 
    return (
      <TouchableHighlight key=data.item.key>
        <TextInput
          placeholder="Hello"
          onChangeText=e => handleChange(data.item.key, 'col1', e)
          value=data.item.col1
          style=[styles.textInput, Props.textInputStyle]
          // ...Props.textInputProps
        />
      </TouchableHighlight>
    );
  ;

  const renderHiddenItem = (rowData: any) => 
    return (
      <View
        style=
          justifyContent: 'flex-end',
          flexDirection: 'row',
          alignItems: 'center',
        >
        <TouchableOpacity
          activeOpacity=0.7
          style=
            backgroundColor: 'red',
            justifyContent: 'center',
            flexDirection: 'row',
            width: 90,
            height: 45,
            alignItems: 'center',
            borderRadius: 5,
          >
          <Text style=color: 'white'>Remove</Text>
        </TouchableOpacity>
      </View>
    );
  ;

但其他所有元素的滑动都按预期工作，只有第一个元素没有按预期工作

【参考方案1】：

通过将 keyExtractor=item => item.key.toString() 添加到 swiper flatlist 找到解决方案。