ScrollView RTL in native native

Question

以下代码是我ScrollView在react native项目中的代码:

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

现在它从左向右移动,如何在第一次加载时从右向左移动？

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}，如果您愿意，请将其放入您的代码中，我的回答只是一个示例。

Answer 2

这确实是 React Native 中一个恼人的 Bug，ScrollView+RTL=Silly Bug。

虽然，您可以采用多种技巧，但我这样做是为了克服该错误：

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