0

我正在开发一个有listiview150-200 名客户的项目。有一个功能，我需要拖放列表项。现在我正在尝试用RecylerListViewAnd来实现它React-Native-Reanimated-2，但面临一些问题。这是我的主要包装。

    const gestureHandler = useAnimatedGestureHandler({
      onStart(event) {
        runOnJS(setMoving)(true);
      },
      onActive(event) {
        top.value = event.absoluteY - 240;
        console.log(listRef);
      },
      onFinish() {
        runOnJS(setMoving)(false);
      }
    });
    
    const renderCustomerList = (type, data) => {
      return (
        <Animated.View style={[styles.customerView]}>
          <PanGestureHandler onGestureEvent={gestureHandler}>
            <Animated.View style={{ width: wp("17%") }}>
              <View style={styles.draggingHandler}>
                <Text>{data.unique_number}</Text>
              </View>
            </Animated.View>
          </PanGestureHandler>
          <Customer key={data.borrower_id} details={data} navigation={props.navigation} />
        </Animated.View>
      );
    }
    
    const MainBody =() => {
      const listRef = React.createRef();
      .....................................
    
      <SafeAreaView style={styles.wrapperView}>
          <RecyclerListView
            ref={listRef}
            style={{ flex: 1 }}
            onScroll={handleScroll}
            onLayout={handleLayout}
            rowRenderer={renderCustomerList}
            dataProvider={dataProvider}
            layoutProvider={layoutProvider}
            renderAheadOffset={RENDER_AHEAD}
          />
    
          {moving && (
            <Animated.View style={reanimatedStyle}>
              <View style={styles.customerView}>
                <View style={[ styles.draggingHandler, {width: wp("17%") }]}>
                  <Text>{selectedCustomer.unique_number}</Text>
                </View>
                <Customer key={selectedCustomer.borrower_id} details={selectedCustomer} navigation={props.navigation} />
              </View>
            </Animated.View>
          )}
        </SafeAreaView>
        ............................................
      }

在这个列表中，当拖动一个项目并达到阈值/顶部时，我正在以编程方式尝试滚动列表视图。为此，我需要获取对RecyclerListView. 但是当我尝试使用listRefinonActive手势事件时，应用程序崩溃了。当我在 android studio 中打开我的 logcat 时，它给了我一堆错误。其中 TypeError: Cannot add new property '__reanimatedHostObjectRef'。可能是什么原因？你有什么建议我应该如何实施。这是一个小吃链接： https ://snack.expo.dev/@rassemdev/customer-list 。如果您删除第 46 行的注释，则会出现错误。这是我的依赖项：

  "dependencies": {
    "@react-native-community/datetimepicker": "^3.5.2",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "^6.0.0",
    "@react-navigation/material-top-tabs": "^6.0.6",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    "moment": "^2.29.1",
    "native-base": "^3.2.1",
    "react": "17.0.1",
    "react-native": "0.64.2",
    "react-native-app-auth": "^6.4.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-pager-view": "^5.4.9",
    "react-native-reanimated": "^2.2.0",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.4.0",
    "react-native-sqlite-storage": "^5.0.0",
    "react-native-svg": "^12.1.1",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^8.1.0",
    "recyclerlistview": "^3.0.5",
    "styled-components": "^5.3.0",
    "styled-system": "^5.1.5"
  },
4

0 回答 0