如何使水平SectionList RIGHT向LEFT滚动做出反应

Question

我想做一个网上商店，我需要一个本地反应的水平部分列表，其中包含我的产品。 这是我的代码。 请帮助我从右到左滚动。clothes是包含我的产品详细信息的一组对象。

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

此sectionList从左向右滚动，我需要从左向右滚动另一个。

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道具或direction样式。