React native中的ScrollView RTL

e0bqpujr 于 2023-10-22 发布在 React

关注(0)|答案(6)|浏览(127)

下面的代码是我在react native项目中的ScrollView：

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

现在它从左向右移动，它怎么可能在第一次加载时从右向左移动？

react-native

来源：https://stackoverflow.com/questions/41036427/scrollview-rtl-in-react-native

6条答案

按热度按时间

iqxoj9l91#

对于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}，如果你想，把它放在你的代码中，我的答案只是一个样本。

赞(0）回复(0）举报 2023-10-22

vaj7vani2#

这是React Native中一个非常烦人的Bug，ScrollView+RTL=Silly Bug。
虽然，有多种黑客可以适应，我这样做是为了克服这个bug：
1.我颠倒了我正在使用的数据数组。
1.使用：onContentSizeChange事件处理程序触发scrollToEnd（{ animated：false }）函数

赞(0）回复(0）举报 2023-10-22

x8goxv8g3#

你可以尝试invertible-scroll-view支持水平和垂直滚动视图

赞(0）回复(0）举报 2023-10-22

frebpwbc4#

正如@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>
        )
    }
}

赞(0）回复(0）举报 2023-10-22

s4n0splo5#

我不得不建立一个自动完成与RTL滚动。这被证明是棘手的，因为滚动到结束的解决方案造成了很多 Flink 。我发现制作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',
  }
});

赞(0）回复(0）举报 2023-10-22

odopli946#

我目前正在使用scrollview RTL。我确认，