如何使水平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樣式。