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, { PureComponent } from 'react';
import { ScrollView, StyleSheet } from 'react-native';

class RTLScrollView extends PureComponent {
  scrollToEnd = () => this.carousel.scrollToEnd({ animated: false });

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

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

export default RTLScrollView;

提示：：我不使用您的其他ScrollView设置，例如bounces={false}，如果需要，请将其放入代码中，我的回答只是一个示例。 / p>

Answer 2

这确实是React Native中令人讨厌的Bug，ScrollView + RTL = Silly Bug。

尽管有多种可以适应的技巧，但我这样做是为了克服该错误：

我反转了正在使用的数据数组。
已使用：onContentSizeChange事件处理程序来触发 ScrollView上的scrollToEnd（{animation：false}）函数

Answer 3

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

Answer 4

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

Answer 5

我必须通过RTL滚动构建自动完成功能。事实证明这很棘手，因为滚动到最终解决方案会引起很多闪烁。我发现制作任何RTL的最佳方法是使用转换样式。如果您使用转换，那么将转换也应用于列表中的每个项目很重要。否则，您将拥有镜像文本。如果您想上下颠倒，也可以使用此解决方案，只需更改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',
  }
});

ScrollView RTL in native native

5 个答案: