如何使 Horizontal SectionList RIGHT to LEFT Scroll react-native答案

【问题标题】：How to make Horizontal SectionList RIGHT to LEFT Scroll react-native如何使 Horizontal SectionList RIGHT to LEFT Scroll react-native
【发布时间】：2019-08-03 12:50:54
【问题描述】：

我想做一个网店，我需要一个 React Native 中的水平部分列表，包含我的产品。这是我的代码。请帮我从右到左滚动。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从左到右滚动，我需要另一个从左到右滚动。

【问题讨论】：

标签： react-native react-native-sectionlist

【解决方案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 方式，但我没有找到解决问题的其他方法。

希望对你有帮助

【讨论】：

这会随着学位的变化而变化，可能不适用于某些设备和语言
我还没有看到这方面的问题。
这会导致意外的问题，例如在 android 上破坏海拔。

【解决方案2】：

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

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

使部分列表或平面列表从右向左滚动，否则不会发生。还有另一种方法可以解决这个问题，但它不是系统的！喜欢使用inverted prop 或direction 样式。

【讨论】：