React Native Gesture Handler中的Swipeable在Android上无法工作

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。

- iNemesis

Answer 1

您需要将Swipeable组件包装在GesturHandlerRootView中。我认为这将解决您的问题。

import {Swipeable, GestureHandlerRootView} from 'react-native-gesture-handler';

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 (
          <GestureHandlerRootView>
            <Swipeable key={key} renderRightActions={RightActions}>
              <View>
                <Text>Swipe left</Text>
              </View>
            </Swipeable>
          </GestureHandlerRootView>
        );
      });
    </ScrollView>
  );
};

export default App;

- Ishaq Kamran

Answer 2

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

- A H

Answer 3

可能和我还是RN新手有关，但我把flatlist的renderItem行组件放在单独的组件文件中，并像这样将其导入主屏幕文件后，我的工作正常：

1. 创建一个新组件文件，例如实现Swipeable。

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

将FlatList导入回主屏幕：

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

3. 您应该已经能够在 FlatList 中进行滑动。
4. 如果我将 renderItem 组件作为 const 放在同一文件中，我的始终无法完美地工作。

- Hakam Raza

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);
+      }
+    };
+  }
}

- Rajesh N

Answer 5

在您的 TouchableOpacity 的 onPress 中，多了一个括号，这就是为什么会出现错误。已经测试过您的代码并删除了多余的括号，现在可以正常工作。

请移除多余的 ")"。

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

- qayyummdnoor