Question

我有一个ListView组件，可以动画并扩展到整个屏幕。由于ListView已被折旧，我试图迁移到Flatlist。 ListView组件如下所示：

<AnimatedListView
  horizontal={true}
  pagingEnabled={!this.state.isDocked}
  style={this.getListViewStyle()}
  {...this._panResponder.panHandlers}
  dataSource={this.state.dataSource}
  enableEmptySections={true}
  renderRow={this._renderCard}
  initialListSize={10}
  scrollRenderAheadDistance={5}
/>;

现在这里的风格适用于：

getListViewStyle() {
  return [
    styles.container,
    {
      width: this.state.dockAnimation.interpolate({
        inputRange: [0, 1],
        outputRange: [
          Dimensions.get("window").width,
          Dimensions.get("window").width * 2
        ]
        // extrapolate: 'clamp'
      })
    },
    {
      transform: [
        {
          scale: this.state.dockAnimation.interpolate({
            inputRange: [0, 1],
            outputRange: [1, 0.5]
            // extrapolate: 'clamp'
          })
        },
        {
          translateX: this.state.dockAnimation.interpolate({
            inputRange: [0, 1],
            outputRange: [0, -Dimensions.get("window").width]
            // extrapolate: 'clamp'
          })
        },
        {
          translateY: this.state.dockAnimation.interpolate({
            inputRange: [0, 1],
            outputRange: [0, Dimensions.get("window").height / 2]
            // extrapolate: 'clamp'
          })
        }
      ]
    }
  ];
}

panHandeler看起来像这样 -

this._panResponder = PanResponder.create({
  onStartShouldSetPanResponder: (evt, gestureState) => {
    return true;
  },
  onStartShouldSetPanResponderCapture: (evt, gestureState) => {
    return true;
  },
  onMoveShouldSetPanResponder: (evt, gestureState) => {
    return true;
  },
  onMoveShouldSetPanResponderCapture: (evt, gestureState) => {
    return true;
  },
  onPanResponderGrant: () => {},
  onPanResponderMove: Animated.event([
    null,
    { dx: this.state.pan.x, dy: this.state.pan.y }
  ]),
  onPanResponderRelease: (evt, gestureState) => {
    let shouldToggle = this.state.isDocked
      ? gestureState.dy < -panDiff / 3
      : gestureState.dy > panDiff / 3;
    if (!shouldToggle) {
      // return to original position
      Animated.spring(this.state.pan.y, {
        toValue: this.state.isDocked ? 0 : 0
      }).start();
    } else {
      // toggle between docked and zoomed
      Animated.spring(this.state.pan.y, {
        toValue: this.state.isDocked ? -panDiff : panDiff
      }).start(() => {
        this.setState({
          isDocked: !this.state.isDocked,
          dockAnimation: !this.state.isDocked
            ? this.state.pan.y.interpolate({
                inputRange: [-panDiff, 0],
                outputRange: [0, 1],
                extrapolate: "clamp"
              })
            : this.state.pan.y.interpolate({
                inputRange: [0, panDiff],
                outputRange: [0, 1],
                extrapolate: "clamp"
              })
        });
      });
    }
  }
});

当我使用时将其转换为flatlist let AminatedFlatlist = Animated.createAnimatedComponent(Flatlist)

出现父界面，但平面列表不呈现。

调试器甚至没有抛出任何错误。

任何人都可以告诉我如何将上面的listview转换为flatlist

Answer 1

刚看到你的问题，我试图在这里做同样的事情。对我有用的解决方案是创建一个新组件并在renderItem方法中调用该组件。像这样：

import Card from './Card';

<AnimatedFlatList
  {...}
  data={this.state.dataSource}
  renderItem={({ item }) => <Card data={item} />} />

希望这可以帮助任何有同样问题的人！

ListView到FlatList动画组件

1 个答案: