reactjs - 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}
  >

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

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