React-native 平面列表项目布局应适应设备方向变化

Question

所以我正在创建图像的平面列表。屏幕上一次仅显示一张图像。 现在，如果我旋转设备，则横向图像应在设备的横向模式下全屏显示。

我无法附上代码，因为它太大了。如果有人可以举一个例子，那就太好了。

想象一下这是我的平面列表的渲染视图，这里我有一个图像代替文本，当设备方向更改为横向时，它应该在横向模式下看到。

当设备方向再次变为纵向时，它不应该影响平面列表的分页。

Answer 1

要在设备旋转到横向模式时更新 FlatList 中图像的尺寸，您可以向 Dimensions API 添加事件侦听器，并使用新尺寸更新状态，如下所示：

  const [imageDimensions, setImageDimensions] = useState({
    width: Dimensions.get('window').width - 40,
    height: Dimensions.get('window').height - 40,
  });

   useEffect(() => {
    const updateDimensions = () => {
      setImageDimensions({
        width: Dimensions.get('window').width - 40,
        height: Dimensions.get('window').height - 40,
      });
      setTimeout(() => {
        flatListRef.current?.scrollToIndex({ animated: false, index: selectedIndex });
      }, 100);
    };

    const dimensionsHandler= Dimensions.addEventListener('change', updateDimensions);

    return () => {
     dimensionsHandler.remove();
    };
  }, [selectedIndex]);

// Image code
   <Image source={{ uri: 'https://url' }} style={imageDimensions} />

确保您的 flatList 具有此可见性配置

 const viewabilityConfig = useRef({
    minimumViewTime: 100,
    itemVisiblePercentThreshold: '90%',
  }).current;


  <FlatList
   ref={flatListRef}
   data={data}
   renderItem={renderItem}
   keyExtractor={(item) => item.id.toString()}
   horizontal
   initialScrollIndex={selectedIndex}
   onViewableItemsChanged={onViewableItemsChanged}
   viewabilityConfig={viewabilityConfig}
   pagingEnabled />

您可以从此处查看此工作示例。

希望有帮助：D

Answer 2

我已经为这个问题苦苦挣扎了这么久。此代码执行您需要的操作，但存在潜在的潜在错误，使visibleIndex 脱离了useEffect 依赖项数组。

  const {height, width} = useWindowDimensions();
  const [visibleIndex, setVisibleIndex] = useState(0);
  const flatListRef = useRef(null);

  useEffect(() => {
    if (data.length > 0 && flatListRef.current) {
      flatListRef.current.scrollToIndex({index: visibleIndex, animated: false});
    }
  }, [width, data]);

  const getItemLayout = (data, index) => ({
    length: width,
    offset: width * index,
    index,
  });

  const handleScrollEnd = event => {
    const newIndex = Math.round(event.nativeEvent.contentOffset.x / width);
    setVisibleIndex(newIndex);
  };

  return (
    <View style={styles.container}>
      <FlatList
        key={width}
        ref={flatListRef}
        data={data}
        renderItem={renderItem}
        keyExtractor={(_, index) => index.toString()}
        getItemLayout={getItemLayout}
        pagingEnabled={true}
        horizontal
        onMomentumScrollEnd={handleScrollEnd}
        showsHorizontalScrollIndicator={false}
        onEndReached={fetchMoreData}
        onEndReachedThreshold={0.5}
      />
    </View>
  );
} 

Answer 3

我用的是混合溶液。就我而言，我有一个滑块，一次可以看到一张图像。这就是为什么我等到动画结束时只有一个元素保持可见的原因。然后我设置 currentIndex。然后我使用 onContentSizeChange 因为它使用 onLayout，所以没有竞争，我不必使用超时。

const handleOnViewableItemsChanged = useCallback(
  ({ viewableItems }: { viewableItems: ViewToken[] }) => {
    if (viewableItems.length === 1 && viewableItems[0].index) {
      currentIndex.current = viewableItems[0].index;
    }
  },
  [],
);

const onContentSizeChange = () => {
  if (listRef.current) {
    listRef.current.scrollToIndex({
      index: currentIndex.current,
      animated: false,
    });
  }};