如何仅对当前可见的项目进行动画处理，而不是 FlatList 水平分页中的其他隐藏项目

Question

目前，使用 FlatList 通过水平分页呈现项目，一次只有一个视图在屏幕上可见，但是当我将 'Animated.View' 传递到 FlatList 的 [renderItem] 时，只要当前可见的项目是单击动画，它还会在后台为所有其他隐藏视图设置动画，以优化性能，我尝试如下分配唯一引用

  //renderItem
  const Slide = ({item, index}) => {
    const paginatedRefs = {}; //adding an object since we need more than one ref({})

    //Animated.View here is using -import 'Animated' from react-native
    return (
      <View
        ref={(ref) => (
          (paginatedRefs.current[item.id] = ref),
          console.log(paginatedRefs[item.id], item.id)
        )}>
        <Animated.View
          style={[
            animatedStyles.hidden,
            rotateFront, //interpolated settings
          ]}>
          <FlipCard inputRef={frontRef} item={item} />
        </Animated.View>
        <Animated.View
          style={[
            [
              animatedStyles.hidden,
              animatedStyles.back,
              rotateBack, //interpolated settings
            ],
          ]}>
          <FlipCard inputRef={backRef} item={item} />
        </Animated.View>
        <View>
          <Text onPress={doAFlip}>Flip</Text>
        </View>
      </View>
      );

我现在的问题是如何在当前可见项上动态设置 'rotateFront/rotateBack' 的样式，或者是否有更有效的替代方法来使用 'function components'

来解决此问题

//function that detects the currently visible item
 const updateCurrentSlideIndex = (e) => {
    //const contentOffsetY = e.nativeEvent.contentOffset.y;
    const contentOffsetX = e.nativeEvent.contentOffset.x;
    const currentIndex = Math.round(contentOffsetX / width);
    setCurrentSlideIndex(currentIndex);
    console.log('current slide', currentIndex);
    //***********
    //trying to link dynamic styling on the currently visible item for individual animation
    //***********
    //paginatedRefs.current.setNativeProps({});
    //let nameOfRef = paginatedRefs.current.getAttribute("data-name");
  };

另外，这是FlatList的配置

      <View style={styles.bodyContainer}>
        <ScrollView ref={refScroll}>
          <FlatList
            ref={ref}
            data={slides}
            keyExtractor={(item, index) => item.id}
            renderItem={_renderItem}
            pagingEnabled={true}
            horizontal={true}
            onMomentumScrollEnd={updateCurrentSlideIndex}
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={styles.bodyScrollView}
          />
        </ScrollView>
      </View>

提前致谢

Answer 1

我从你的问题中得到的是，当用户点击 Flatlist 的 renderItem 中的视图时，你想为它设置动画。如果是这样，您需要将渲染项制作为 React 组件并在其中创建 ref，当您在组件内使用 ref 调用动画时，它将为唯一可见的项目设置动画。这是一个例子

const Slide = ({item,index})=> {
const ref = useRef(null);
return (<Animated.View ref = {ref}>
<TouchableOpacity onPress = {()=> {ref.current.animate....}}>
...
</TouchableOpacity>
</Animated.View>
}

因为 Flatlist 期望 renderItem 是一个函数，所以它不会接受 Slide，它是 React 组件，所以你需要做一些类似的事情

<Flatlist
renderItem = {(props)=> <Slide {...props}/>}
..../>

如何仅对当前可见的项目进行动画处理，而不是 FlatList 水平分页中的其他隐藏项目

How to animate only the currently visible item, instead of other hidden items in FlatList horizontal pagination

styling

react-native

react-animated

react-native-flatlist