React-Native |滾動型從右到左

Question

我有簡單的滾動型：

<ScrollView 
    style={$style.category_container} 
    horizontal={true} 
    showsHorizontalScrollIndicator={false} 
    automaticallyAdjustContentInsets={true} 
> 
    <Item title={'1'} /> 
    <Item title={'2'} /> 
</ScrollView> 

項目是加載幾個縮略圖的組成部分。我的應用程序計劃用於LTR和RTL用戶，所以在涉及RTL時會發生方向變化。

問題是當我使用RTL接口 - ScrollView仍然從左向右移動，我看不到所有的縮略圖。

我該如何解決它？

Answer 1

如果將來有人會遇到這個問題： 目前沒有任何「內置」屬性將ScrollView的方向設置爲RTL。

但是這對我工作：

• 設置flexDirection: 'row-reverse'以滾動型的風格，這將從右到左的順序您的項目。

• 使用onContentSizeChange初始化列表的滾動在右側。

下面是一個例子：

scrollListToStart(contentWidth, contentHeight) { 
    if (I18nManager.isRTL) { 
     this.scrollView.scrollTo({x: contentWidth}); 
    } 
} 

render() { 
    let containerStyle = I18nManager.isRTL ? styles.RTLContainer : styles.LTRContainer; 

    return (
     <ScrollView 
      ref={ref => this.scrollView = ref} 
      onContentSizeChange={this.scrollListToStart.bind(this)} 
      horizontal={true} 
      style={[styles.buttonsContainer, containerStyle]}> 
      {this.renderButtons()} 
     </ScrollView> 
    ) 
} 


const styles = StyleSheet.create({ 

    RTLContainer: { 
     flexDirection: 'row-reverse' 
    }, 

    LTRContainer: { 
     flexDirection: 'row' 
    } 
})