React-Native | Scroll rechts

Question

Ich habe einfach Scroll nach links:

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

Artikel ist eine Komponente, die mehrere Thumbnails lädt. Meine Anwendung ist sowohl für LTR- als auch für RTL-Nutzer geplant, sodass sich die Richtung bei RTL ändert.

Das Problem ist, wenn ich RTL-Schnittstelle verwende - die ScrollView bewegt sich immer noch von links nach rechts und ich kann nicht alle meine Thumbnails sehen.

Wie kann ich es lösen?

Answer 1

Wenn jemand in Zukunft darauf stoßen wird: Es gibt keine 'eingebaute' Eigenschaft, die die Richtung von ScrollView im Moment auf RTL setzt.

Allerdings ist, was für mich gearbeitet:

• gesetzt flexDirection: 'row-reverse' zu Scroll Stil, die Ihre Artikel von rechts bestellen, werden nach links.

• Verwenden Sie onContentSizeChange zu Init Liste Scroll auf der rechten Seite.

Hier ist ein Beispiel:

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