Question

您好，我正在尝试添加一项功能，该功能允许用户根据创建项目的条件从平面列表中删除该项目。我的支票是if (id.user[0].name === item)

目前，他们要么都具有“删除”功能，要么都没有。

我想知道我尝试改变Swipeout状态的方法是否可能。

 renderItem(item) {
const { id } = this.state;

const swipeBtns = [
  {
    text: 'Delete',
    backgroundColor: 'red',
    underlayColor: 'rgba(0, 0, 0, 1, 0.6)',
    onPress: () => {
      this.deleteNote(item);
    },
  },
];

return (
  <Swipeout
    right={swipeBtns}
    autoClose="true"
    backgroundColor="transparent"
    disabled={this.state.swipeState}
  >
    <ListItem
      onPress={() => this.toggleModalConfirmTrip(item)}
      roundAvatar
      subtitle={item.user[0].name}
      title={`${item.location_from} to ${item.location_to} `}
      rightTitle={item.timeStamp}
      avatar={
        <Image
          source={require('../assests/carLogo.png')}
          style={{ width: 40, height: 50, borderRadius: 10 }}
        />
      }
      containerStyle={{ borderBottomWidth: 0, paddingBottom: 10 }}
    />
  </Swipeout>
);

}

  renderSwipe = item => {
const { id } = this.state;
this.setState({ item, swipeState: false });
console.warn(item, id);
if (id === item) {
  this.setState({ swipeState: false });
} else {
  this.setState({ swipeState: true });
}

};

我的问题是我应该在哪里运行此renderSwipe函数，或者是否存在另一种方法，可以根据上述条件在某些项目上启用滑动，而在其他项目上禁用它。

谢谢

Answer 1

我认为可以在renderItem函数中执行此操作，因此您可能不需要renderSwipe函数。

您可能在为整个组件设置state时遇到了问题。因此，当您将swipeState设置为false时，列表中的每个项目的swipeState都将为false。

SwipeOut有一个名为disabled的道具，将此值设置为true将禁用滑动功能。然后，您要做的就是检查一下您的状况。

所以类似的事情应该可以解决。

<SwipeOut
  ...
  disabled={id.user[0].name !== item} 
>

因此，当id.user[0].name !== item为true时，将禁用滑动，而如果为false，则将启用滑动。

只需确保您在比较正确的事物即可。我觉得您可能希望比较id.user[0].name !== item.user[0].name

反应原生条件渲染刷卡列表项

1 个答案: