React Native中的ScrollView RTL

Question

以下是我在一个React Native项目中使用的ScrollView代码：

  <ScrollView
    ref={(scrollView) => { this._scrollView = scrollView; }}
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    showsVerticalScrollIndicator={false}
    directionalLockEnabled={true}
    bounces={false}
    scrollsToTop={false}
  >

现在它从左到右移动，如何使其在第一次加载时从右到左移动？

- gregory

Answer 1

对于RTL设置，您应该像下面的示例代码一样编写：

import React, { useRef } from 'react';
import { ScrollView, StyleSheet } from 'react-native';

const RTLScrollView = () => {
  const scrollRef = useRef();
  const scrollToEnd = () => scrollRef.current.scrollToEnd({ animated: false });

  return (
    <ScrollView
      horizontal
      ref={scrollRef}
      showsHorizontalScrollIndicator={false}
      onContentSizeChange={scrollToEnd}
      contentContainerStyle={styles.contentContainerStyle}
    >
      ~~~
      ~~~
      ~~~
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  contentContainerStyle: {
    flexDirection: 'row-reverse'
  }
});

export default RTLScrollView;

提示：我没有使用您的其他ScrollView设置，例如bounces={false}。如果您想要使用，请将其放入您的代码中，我的答案只是一个示例。

- AmerllicA

Answer 2

这是React Native中真正令人恼火的Bug，ScrollView+RTL=Silly Bug。

尽管有多种可采用的hack方法，但我采用以下方法克服了该问题：

1. 反转所使用的数据数组。
2. 使用：onContentSizeChange事件处理程序在ScrollView上触发scrollToEnd({animated: false})函数。

- Ali Sao

Answer 3

你可以尝试使用可逆滚动视图，它支持水平和垂直滚动视图

- Arash Kadkhodaei

Answer 4

我需要构建一个带有RTL滚动的自动完成功能。这证明是棘手的，因为滚动到末尾的解决方案会导致很多闪烁。我发现使任何东西RTL的最佳方法是使用transform样式。如果您使用transform，则重要的是将transform应用于列表中的每个项目。否则，您将拥有镜像文本。如果您想要反转上/下，此解决方案也适用，只需更改transform scaleY而不是x。

这是我的ScrollView：

const renderList = () => {
  return itemList.map(item => (
    <Item
      key={item.id}
      address={item}
      style={{ transform: [{ scaleX: -1 }] }}
    />
  ));
};

....
<ScrollView
  contentContainerStyle={styles.scrollViewContentContainer}
  horizontal
  keyboardShouldPersistTaps="always"
  ref={scrollView}
  style={styles.scrollView}
>
  {renderList()}
</ScrollView

这是相应的ScrollView样式：

const styles = StyleSheet.create({
  scrollView: {
    marginRight: 10,
    transform: [{ scaleX: -1 }]
  },
  scrollViewContentContainer: {
    flexGrow: 1,
    justifyContent: 'flex-end',
  }
});

- ccfz

Answer 5

如@SlashArash所提到的，您可以使用react-native-invertible-scroll-view。以下是一个示例：

import React, { Component } from 'react';
import { View, Text, ScrollView} from 'react-native';
import InvertibleScrollView from 'react-native-invertible-scroll-view';

export default class Demo extends Component {

    constructor(props) {
        super(props);

        this.scrollView = null;
    }


    render() {
        let categories = ['one', 'two'];
        categories = categories.map((category, index) => {
            return (
                <Text>{category}</Text>
            )
        });

        return (
            <View style={{
                flex: 1,
            }}>
                <InvertibleScrollView inverted
                    ref={ref => { this.scrollView = ref }}
                    onContentSizeChange={() => {
                        this.scrollView.scrollTo({y: 0, animated: true});
                    }}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                >
                    {categories}
                </InvertibleScrollView>
            </View>
        )
    }
}

- Gandalf

Answer 6

嗯，我目前正在处理scrollview RTL的问题。 我通过添加确认。

contentContainerStyle={{flexGrow: 1}}>

在这两个设备上都正常工作。在IOS上即使没有flexGrow: 1也能正常工作，但在安卓上需要添加这一行。

希望问题已经得到了很好的回答。

此外，请注意scrollView的RTL问题已经修复，只需要添加这一行即可。

- Soban Arshad