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>

正如你所看到的，我的滚动视图有scaleX = -1样式我在滚动视图中的所有孩子都有scaleX = -1样式

由于 scaleX 在视图中已弃用，您可以transform:[{rotateY:'180deg'}]改用