时间戳

首页 > 解决方案 > 反应原生条件渲染 swipeout listitem

react-native - 反应原生条件渲染 swipeout listitem

问题描述

嗨所以我正在尝试添加一个功能，允许用户根据他们创建的标准从平面列表中删除一个项目。我的支票是 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 函数，或者是否有另一种方法可以在某些项目上启用滑动并根据上述条件禁用其他项目。

谢谢

标签： react-nativeconditionalrenderingstate

解决方案

我认为可以在您的 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

推荐阅读