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。

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>}}

您应该已经可以在平面列表中滑动
如果我将 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);
+      }
+    };
+  }
}

Answer 5

您需要将 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;

React-native-gesture-handler swipeable 不适用于 Android

React-native-gesture-handler swipeable is not working on Android

android

gesture

react-native