如何使水平部分列表从右到左滚动反应原生

Question

我想做一个网上商店，我需要一个 React Native 中的水平部分列表，包含我的产品。这是我的代码。请帮助我从右向左滚动。衣服是一个包含我的产品详细信息的对象数组。

    export default class MySectionList extends Component{
        render(){
            return(
               <SectionList
                   sections={Clothes} 
                   horizontal={true}
                   showsHorizontalScrollIndicator={false}
                   renderItem={({item})=>(
                       <View>
                           <Image source={{uri:"item.image",width:'65%',height:200}}/>
                           <Text>{item.name}</Text>
                           <Text>{item.price}</Text>
                       </View>
                  )}
                  renderSectionHeader={({section})=>(
                       <Text>{section.title}</Text>)}
              />
       )
    }
}

此部分列表从左向右滚动，我需要另一个从左向右滚动。

Answer 1

我通过添加一些样式来解决这个问题。不幸的是，I18NManager 无法解决我的问题，所以我使用了

transform

样式，并且对于我应用了

transform: [{ scaleX: -1 }]

的所有部分列表，并且由于部分列表中的项目将被反转，我再次为项目包装器应用了此样式。像这样的东西：

    render(){
            return(
               <SectionList
                   sections={Clothes} 
                   horizontal={true}
                   style={{ transform: [{ scaleX: -1 }] }}
                   showsHorizontalScrollIndicator={false}
                   renderItem={({item})=>(
                       <View style={{ transform: [{ scaleX: -1 }] }}>
                           <Image source={{uri:"item.image",width:'65%',height:200}}/>
                           <Text>{item.name}</Text>
                           <Text>{item.price}</Text>
                       </View>
                  )}
                  renderSectionHeader={({section})=>(
                       <Text>{section.title}</Text>)}
              />
           )
       }
    }

这是一种 hacky 方式，但我没有找到解决我的问题的另一种解决方案。

我希望这可以帮助你

Answer 2

如果您的应用程序语言是从右到左，请将应用程序支持设置为使用 RTL

I18NManager.allowRTL(true) 
I18NManager.forceRTL(true)  

使部分列表或平面列表从右向左滚动，否则不会发生这种情况。还有其他方法可以解决这个问题，但它不系统！就像使用

inverted

道具或

direction

风格。

Answer 3

我对从右到左的功能也有类似的需求。我使用了带有

inverted

属性的水平 FlatList（2022 年）。

   <FlatList
        horizontal
        data={diaryWeeksAll}
        inverted
        getItemLayout={(_data, index) => ({ length: width, offset: width * index, index })}
       ...

参见文档：https://reactnative.dev/docs/flatlist#inverted

Answer 4

单独使用 I18nManager.forceRTL 或 inverted 不足以使 FlatList 完全 RTL，因为如果项目数少于屏幕大小，列表将从左侧开始，而不是从右侧开始。 看看这个问题

我找到了一个解决方案，它适用于 React Native 0.75.2，但这个问题可能会在未来的 React Native 更新中得到解决。

import React, {useEffect, useRef, useState} from 'react';
import {FlatList, I18nManager} from 'react-native';

/**
 * HorizontalRTLSupportFlatList
 *
 * This component is a custom wrapper around React Native's FlatList to add support
 * for Right-to-Left (RTL) layouts when rendering horizontal lists. It automatically
 * handles reversing the scroll direction and item order in RTL mode while maintaining
 * the correct visual order of list items. Additionally, it includes logic to manage
 * scrolling behavior in large screens and to handle potential scroll failures.
 *
 * Why this component was created:
 * - React Native's FlatList does not provide native RTL scrolling for horizontal lists.
 * - This component ensures correct scrolling direction and item order in RTL layouts.
 * - It solves the need for a reusable RTL-friendly horizontal FlatList component.
 *
 * Key Features:
 * - Automatically flips the FlatList's horizontal scrolling in RTL mode by reversing the data and using the `inverted` prop.
 * - Reverses the data array to display items in the correct visual order for RTL layouts.
 * - Scrolls to the last item in RTL mode (or the first item in LTR mode) after the layout is complete.
 * - Adjusts the scroll offset to center the selected item for large screens.
 * - Handles potential `scrollToIndex` failures by using `onScrollToIndexFailed` to retry scrolling after a small delay.
 *
 * Scroll Behavior:
 * - Uses the `inverted` prop to flip the scrolling direction in RTL mode without the need for a `scaleX` transformation.
 * - Scrolls to the last item in RTL mode once the layout is complete and retries scrolling on failure.
 * - Adjusts the scroll offset on large screens for better centering of items.
 */

const HorizontalRTLSupportFlatList = ({renderItem, data, ...props}) => {
  const flatListRef = useRef(null); // Reference for accessing FlatList methods like scrollToIndex
  const [isLayoutComplete, setIsLayoutComplete] = useState(false); // Tracks whether the FlatList has completed layout
  const [isScrollToIndexFailed, setScrollToIndexFailed] = useState(false); // Tracks if scrollToIndex has failed

  // Reverse the data if RTL mode is active to ensure the correct visual order of items.
  const processedData = I18nManager.isRTL ? [...data].reverse() : data;

  useEffect(() => {
    // Scroll to the last item in RTL mode after the layout is complete
    if (I18nManager.isRTL && isLayoutComplete && flatListRef.current && processedData.length > 0) {
      flatListRef.current.scrollToIndex({index: processedData.length - 1, animated: false});
    }
  }, [isLayoutComplete, isScrollToIndexFailed, processedData]);

  return (
    <FlatList
      ref={flatListRef} // Ref to programmatically control FlatList
      horizontal // Specifies horizontal list layout
      inverted={I18nManager.isRTL} // Inverts scrolling in RTL mode
      data={processedData} // Use processed (reversed) data for correct RTL order
      {...props} // Spread other props like keyExtractor, extraData, etc.
      renderItem={renderItem} // Function to render each item in the list
      onLayout={() => setIsLayoutComplete(true)} // Trigger layout completion callback
      onScrollToIndexFailed={info => {
        // Handle scrollToIndex failure and retry after a short delay
        const wait = new Promise(resolve => setTimeout(resolve, 200));
        wait.then(() => {
          setScrollToIndexFailed(true);
        });
      }}
    />
  );
};

export default HorizontalRTLSupportFlatList;