React原生可从手势处理程序中滑动，显示多个项目

mutmk8jj 于 6个月前发布在 React

关注(0)|答案(2)|浏览(79)

在我的react应用程序中，我使用了来自react原生手势处理程序的Swipeable。当用户向左滑动时，我会显示两个按钮。

<Swipeable
    ref={updateRef}
    friction={2}
    leftThreshold={80}
    rightThreshold={41}
    renderRightActions={renderRightActions}>children </Swipeable>

const renderRightAction = (text: string, color: string, x: number, progress: any, imageUrl: string, dragX: any) => {
    
    const pressHandler = () => {
      close();
      console.log(text);
    };
    return (
      <Animated.View style={{ flex: 1, transform: [{ translateX: 0 }] }}>
        <RectButton
          style={[styles.rightAction, { backgroundColor: color }]}
          onPress={pressHandler}>
          <SvgXml xml={imageUrl} width={wp(16)} height={wp(16)} />
          <Text style={styles.actionText}>{text}</Text>
        </RectButton>
      </Animated.View>
    );
  };
 

     const renderRightActions = (progress: any, dragX: any) => (
        <View style={styles.renderRightActionsContainer}>
          {renderRightAction('Favoritt', Colors.lightBeige, 84, progress, Images.Favourite, dragX)}
          {renderRightAction('Skjul', Colors.primaryBackground, 84, progress, Images.CloseEye, dragX)}
        </View>
      );

字符串
它是工作，我无法实现的是，如果用户不断滑动我希望其中一个按钮（删除）采取全宽，然后删除项目的行。

react-native

来源：https://stackoverflow.com/questions/72727362/react-native-swipe-able-from-gesture-handler-showing-multiple-items

2条答案

按热度按时间

wswtfjt71#

你可以使用onSwipeableOpen（（）=> pressPush（））。
https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/swipeable#onswipeableopen
我的建议请使用键到你的Swipeable。这将防止不关闭renderRightActions的问题。

<Swipeable
  key={someUniqueKey}
  ...
>
  ...
</Swipeable>

字符串
如果您遇到无法关闭的问题，请检查：Delete on swipe is not closing the Swipeable React native

赞(0）回复(0）举报 6个月前

8hhllhi22#

我已经解决了这个错误使用以下方法，它是工作

const data = [
        {
          header: 'Email signature',
          subHeader: 'text',
        },
        {
          header: 'Email signature',
          subHeader: 'text',
        },
        {
          header: 'Email signature',
          subHeader: 'text',
        },
      ];
    
      const swipeables = data.map(() => useRef());
    
      const openRow = index => {
        swipeables.forEach((swipeableRef, i) => {
          if (swipeableRef.current && i !== index) {
            swipeableRef.current.close();
          }
        });
      };

  const renderItem = ({item, index}) => (
    <Swipeable
      ref={swipeables[index]}
      onSwipeableOpen={() => openRow(index)}
      renderRightActions={() => (
        <View
          style={{
            justifyContent: 'center',
            gap: 30,
            paddingHorizontal: 20,
          }}>
          <TouchableOpacity
            onPress={() => handleEdit(index)}
            style={styles.swipeEditButton}>
            <MaterialIcons name="edit" color={'white'} size={25} />
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() => handleDelete(index)}
            style={styles.swipeDeleteButton}>
            <MaterialCommunityIcons name="delete" color={'white'} size={25} />
          </TouchableOpacity>
        </View>
      )}>
      <View style={styles.listItem}>
        <View style={styles.textContainer}>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}>
            <View>
              <Text style={styles.header}>{item.header}</Text>
              <Text style={styles.subHeader}>{item.subHeader}</Text>
            </View>
            <MaterialIcons
              name="keyboard-arrow-right"
              color={Dark_Grey}
              size={35}
            />
          </View>
        </View>
      </View>
    </Swipeable>
  );

字符串

我的公寓列表：

<FlatList
    data={data}
    keyExtractor={(item, index) => index.toString()}
    renderItem={renderItem}
    showsVerticalScrollIndicator={false}
    style={{paddingVertical: 15}}
  />

型

赞(0）回复(0）举报 6个月前

我来回答

React原生可从手势处理程序中滑动，显示多个项目

2条答案

相关问题

热门标签

最新问答