Question

我正在尝试使用react-native-swipeout来仅在滑动时显示“删除”按钮。删除操作将使用graphql突变（react-apollo）

首先，我在自定义组件的组件内部使用组件，并传递onPress函数，在该函数中执行graphql突变以删除服务器上的数据。

const renderItem = ({ item, index, props }: { item: any; index: number; props: Props }) => {
  const swipeoutBtns = [
    {
      text: 'Edit',
    },
    {
      text: 'Delete',
      backgroundColor: 'red',
      component: <DeleteService id={props.id} data={props.data} index={index}/>,
      onPress: () => {
        console.log('Pressed');
      },
    },
  ];
  return (
    <Swipeout rowId={index} right={swipeoutBtns} autoClose={true}>
      <ServiceItem data={item} isHeader={false} />
    </Swipeout>
  );
};

在用替换之前，这里是我使用的代码。关于数据突变，它工作正常，但不会执行autoClose。

export const DeleteService: React.SFC<Props> = (props: Props) => {
 const { id, data, index } = props;
 return (
    <Mutation mutation={MutationGQL}>
      {(deleteFunc: any) => (
        <Button
          onPress={() => {
            data.splice(index, 1);
            const inputData = data.map(
              (item) => {
                return { 
                   name: item.name, 
                   price: item.price, 
                   technician: item.technician.id };
              }
            );
            deleteFunc({ variables: { id, services: inputData } });
          }}
          title={'Delete'}
        >
          {'Delete'}
       </Button>
      )}
    </Mutation>
  );
};

这是我尝试替换为之后的代码。当我单击“删除”文本（在Swipeout提供的按钮UI上）时，仍然仅完成了变异作业，但没有执行autoClose。当我单击按钮的外部时，只会发生自动关闭，而没有完成任何变异工作。

        <TouchableHighlight
          onPress={() => {
            data.splice(index, 1);
            const inputData = data.map(
              (item) => {
                return { 
                   name: item.name, 
                   price: item.price, 
                   technician: item.technician.id };
              }
            );
            deleteFunc({ variables: { id, services: inputData } });
          }}
        >
          <Text>{'Delete'}</Text>
       </TouchableHighlight>

有什么解决方案可以使我在单击“删除”按钮时同时执行这两项操作？

自定义组件中的onPress不会自动关闭<swipeout> react-native-swipeout

0 个答案: