反应本机条件渲染 swipeout listitem

Question

你好所以我正在尝试添加一个功能，允许用户根据他们创建它的标准从平面列表中删除一个项目。我的支票是 if (id.user[0].name === item)

目前，他们要么全部 'Delete' 滑动，要么 none 滑动。

我想知道我正在使用的方法是否有可能试图改变 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

反应本机条件渲染 swipeout listitem

react native conditional rendering swipeout listitem

conditional

state

rendering

react-native