反应原生 |ScrollView 从右到左 [英] React-Native | ScrollView right to left

问题描述

我有简单的滚动视图:

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

Item 是一个加载多个缩略图的组件.我的应用计划同时面向 LTR 和 RTL 用户，因此 RTL 的方向发生了变化.

Item is a component which loads several thumbnails. My application planned for both LTR and RTL users, so there is change in directions when it comes to RTL.

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

The problem is when I'm using RTL interface - the ScrollView still moving from left to right and I can't see all my thumbnails.

我该如何解决?

推荐答案

你可以这样使用我这样做并为我工作此解决方案有 2 轮

you can use this way i did this and worked for me This solution has 2 rounds

1-首先为您的 scrollView 制作此样式:style={{scaleX:-1}}

1-first make this style for your scrollView : style={{scaleX:-1}}

2 秒为 scrollView 中的每个孩子制作这种样式:style={{scaleX:-1}}

2-second make this style for each of your childs in 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 样式

As you can see my scrollview has scaleX = -1 style Also all of my childs in scrollView has scaleX = -1 style

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

as scaleX is deprecated in views you can use transform:[{rotateY:'180deg'}] instead

这篇关于反应原生 |ScrollView 从右到左的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！