React-Native | ScrollView从右到左

Question

我有一个简单的ScrollView：

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

Item是一个加载多个缩略图的组件。我的应用程序计划同时面向LTR和RTL用户，因此当涉及到RTL时，方向会发生变化。

问题是当我使用RTL界面时- ScrollView仍然从左向右移动，我看不到我所有的缩略图。

我该怎么解决它呢？

Answer 1

如果有人在未来遇到这种情况:目前没有任何‘内置’属性可以将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轮

1-首先为您的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>

如你所见，我的scrollview有scaleX = -1风格，我在scrollView中的所有孩子也有scaleX = -1风格

由于视图中不推荐使用scaleX，因此可以改用transform:[{rotateY:'180deg'}]

Answer 3

以防有人遇到和我类似的问题。我正在对用户图像进行水平ScrollView，需要图像从右向左显示。谢谢你们，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>