Question

我有Simple ScrollView：

<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

如果有人将来遇到这种情况：没有任何内置的＆＃39;此刻将ScrollView的方向设置为RTL的属性。

然而，这对我有用：

将flexDirection: 'row-reverse'设置为ScrollView的样式，该样式将从右到左订购您的商品。
使用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'
    }
})

Answer 2

您可以使用这种方式我这样做，为我工作此解决方案有2轮

首先为您的scrollView设置此样式：style={{scaleX:-1}}

2秒为您的每个孩子在scrollView中使用这种样式：style={{scaleX:-1}}

例如

 <ScrollView
                            horizontal={true}
                            contentContainerStyle={{height: 65}}
                            style={{scaleX:-1}}
                            showsHorizontalScrollIndicator={false}>
                            {
                                data.sports.map((data,index) => {
                                    return(
                                        <View key={index}
                                            style={{width:150,height:55,backgroundColor:'yellow', marginHorizontal:4,scaleX:-1}}/>
                                    )
                                })
                            }
                        </ScrollView>

您可以看到我的滚动视图具有scaleX = -1样式另外，我所有在scrollView中的孩子都拥有scaleX = -1风格

在视图中不推荐使用scaleX，您可以改用transform:[{rotateY:'180deg'}]

Answer 3

以防万一有人和我有类似的问题。我正在使用用户图像进行水平 ScrollView，并且需要图像从右到左显示。感谢 Mr-Ash 和 Sergey Serduk 带我到那里。

<ScrollView
  horizontal
  showsHorizontalScrollIndicator={false}
  style={{
    alignSelf: "center",
    borderRadius: 100,
    transform: [{ scaleX: -1 }],
  }}>
  {users.map((user, i) => {
    return (
      <View key={i} style={[{ transform: [{ scaleX: -1 }], zIndex: 100 - i }]}>
        <UserImage leftMargin={-27} />
      </View>
    );
  })}
  <View style={{ marginRight: 27 }} />
</ScrollView>

React-Native | ScrollView从右到左

3 个答案: