Question

这是我的代码。

App.js

import Swipeable from 'react-native-gesture-handler/Swipeable';

const RightActions = () => {
  return (
    <TouchableOpacity onPress={() => console.warn('works'))}>
      <Icon name="md-trash" size={18} color={Colors.red} />
    </TouchableOpacity>
  );
};

const App = () => {
  return (
    <ScrollView>
    ...
      {Object.keys(data).map(key => {
        return (
          <Swipeable key={key} renderRightActions={RightActions}>
            <View>
              <Text>Swipe left</Text>
            </View>
          </Swipeable>
        );
      });
    </ScrollView>
  );
};

export default App;

这是我的MainActivity.java程序包的提示。

package com.project;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "project";
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

我不知道发生了什么，但这有点令人沮丧。有谁知道该怎么办？我的代码是我找到的教程的精确副本，因此我希望它能正常工作。唯一的区别是我的项目使用react-native，而本教程使用的是expo。

Answer 1

使用FlatList代替map，因为react-native-gesture-handler支持列表组件。

Answer 2

在您的TouchableOpacity onPress处您有额外的），这就是您出错的原因。已经测试您的代码，删除了多余的）并可以正常工作。

删除多余的“）”

TouchableOpacity onPress={() => console.warn('works')}

Answer 3

可能相关与否，因为我还是 RN 的新手，在我将 flatlist 的 renderItem 行组件放在单独的组件文件中并将其导入主屏幕文件后，我的工作正常：

创建新的组件文件，示例实现 Swipeable。

export default RowItemComponent =()=> {
  return (
   <Swipeable>
      ....
   </Swipeable>
   )
}

导入回主屏幕平面列表：

<Flatlist renderItem = {({item}) => { return <RowItemComponent>}}

您应该已经能够在 flatlist 内滑动
如果我将 renderItem 组件作为 const 放在同一个文件中，我的总是无法完美工作。

Answer 4

更新您的 MainActivity.java 文件（或您创建 ReactActivityDelegate 实例的任何地方），以便它覆盖负责创建 ReactRootView 实例的方法，然后使用此库提供的根视图包装器。不要忘记导入 ReactActivityDelegate、ReactRootView 和 RNGestureHandlerEnabledRootView：

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

React-native-gesture-handler swipeable在Android上不起作用

4 个答案: