如何在 react-native 的平面列表中滑动组件？

Question

目的是从平面列表中滑动一个组件，从右侧或左侧滑动以显示我们在 Instagram 上的选项。 Instagram 的滑块报告功能仅适用于 iOS，不适用于 android

我们已经尝试过使用 react-native-navigation-drawer，因为它可以在特定视图内创建菜单，但它与我们对项目的依赖相冲突，因此我们正在寻找其他选项。

Answer 1

您可以通过使用react-native-gesture-handler来实现它

例子

import React, { Component } from "react";
import { Animated, StyleSheet, View } from "react-native";
import { RectButton } from "react-native-gesture-handler";
import Swipeable from "react-native-gesture-handler/Swipeable";

class AppleStyleSwipeableRow extends Component {
  renderLeftActions = (progress, dragX) => {
    const trans = dragX.interpolate({
      inputRange: [0, 50, 100, 101],
      outputRange: [-20, 0, 0, 1],
    });
    return (
      <RectButton style={styles.leftAction} onPress={this.close}>
        <Animated.Text
          style={[
            styles.actionText,
            {
              transform: [{ translateX: trans }],
            },
          ]}>
          Archive
        </Animated.Text>
      </RectButton>
    );
  };
  render() {
    return (
      <Swipeable
        renderLeftActions={this.renderLeftActions}>
        <Text>
           "hello"
         </Text>
      </Swipeable>
    );
  }
}