如何使水平截面清单右至左滚动反应

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 }]，并且由于sectionList内部的项目将被逆转，因此我再次将此样式应用于项目包装器。这样的东西：

    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>)}
              />
           )
       }
    }

这是一种骇人听闻的方法，但我没有找到我的问题的另一个解决方案。

我希望这可以帮助您

Answer 2

如果您的应用程序语言是正确的，请设置应用程序支持以将RTL与

一起使用

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

将截面列表或平面列表从右到左滚动，否则就不会发生。还有另一种解决这个问题的方法，但这不是系统性的！喜欢使用inverted Prop或direction样式。

Answer 3

我对左右功能的需求类似。我将水平置列(2022年(与inverted属性一起使用。

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

请参阅文档：https：//reaectnative.dev/docs/flatlist#inverted