反应原生 |从右到左滚动视图答案

【问题标题】：React-Native | ScrollView right to left反应原生 |从右到左滚动视图
【发布时间】：2017-03-23 07:19:10
【问题描述】：

我有一个简单的 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 仍在从左向右移动，我看不到所有缩略图。

我该如何解决？

【问题讨论】：

试试这个：<View style={{direction: 'rtl'}}><ScrollView ... /></View> 方向可以设置为 rtl、ltr、inherit、initial、revert 或 unset

标签： uiscrollview react-native scrollview horizontalscrollview

【解决方案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'
    }
})

【讨论】：

谢谢，我已经禁用了 forceRTL 选项 - 并且任何 RTL 样式都适用于本地调整。我同意您的解决方案是使事情正常进行的正确方法，因为几周前我自己就这样做了。希望它可以帮助其他人。

【解决方案2】：

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

1-首先为您的滚动视图制作此样式：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'}]

【讨论】：

它就像一个魅力！只有一件事，scaleX 已被弃用，所以你需要使用 transform: [{ scaleX: -1}] 而不是 scaleX:-1

【解决方案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>

【讨论】：

【解决方案4】：

就我而言，正确的解决方案是用<View/> 包装<ScrollView/> 组件，见下文：

<View style={{direction: 'rtl'}}><ScrollView ... /></View>

方向可以设置为rtl、ltr、inherit、initial、revert或unset

【讨论】：