React-native ScrollView，自动滚动行为答案

【问题标题】：React-native ScrollView, auto scroll behaviourReact-native ScrollView，自动滚动行为
【发布时间】：2019-11-04 16:08:43
【问题描述】：

我正在尝试在 ScrollView 中实现自动滚动，但不知何故无法找到正确的方法，我的想法是，如果我添加一个项目并且 contentSize 溢出了我应该滚动的 ScrollView 宽度到最后，如果我删除一个项目并且 contentSize 小于 ScrollView 宽度，我应该滚动到开头。

这是我目前所拥有的

    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      ref={(scrollView) => {
        this.scrollView = scrollView;
      }}
      onLayout={(e) => {
        this.layoutWidth = e.nativeEvent.layout.width;
      }}
      onContentSizeChange={(contentWidth, contentHeight) => {
        this.scrollView.scrollTo({
          x: contentWidth > this.layoutWidth ? contentWidth + this.layoutWidth - width : 0,
          y: 0,
          animated: true,
        });
      }}>
      {contacts.map((contact) => (
        <SelectedContacsItem
          contact={contact}
          onRemoveContactPress={onRemoveContactPress}
          key={contact.id}
        />
      ))}
    </ScrollView>

这不适用于删除项目过程，在最后一个项目上（当内容小于视图时）它将内容移动到随机位置，我添加了 onScroll 道具并从那里观看日志，似乎contentOffSet 是问题，因为它具有随机值（有时是负值，有时是大数字），不知道如何解决。

【问题讨论】：

自动滚动需要做什么？例如，我有 3 件物品，您要移到另一件吗？
@idan 你有一个列表，如果屏幕尺寸大于你不滚动的列表尺寸，一旦它溢出它应该滚动到右边，一旦它减小到小于项目应位于左侧的屏幕
如果我理解正确，请告诉我 - 您以水平方式显示列表，如果列表大于屏幕宽度，您想自动滚动到屏幕末尾？
@Idan 对，如果它再次将尺寸减小到小于屏幕的尺寸，则将内容保持在左侧而不是右侧
我用代码附上了答案

标签： reactjs react-native react-native-scrollview

【解决方案1】：

我在一周前做了这样的事情，我建议你（像我一样）在这种情况下放弃 ScrollView 和 map

<FlatList
   ref={ref => this.flatListRef = ref}
   horizontal
   data={contact}
   extraData={this.state}
   keyExtractor={(item, index) => index}
   renderItem={({ item, index }) => <SelectedContacsItem
      contact={item}
      onRemoveContactPress={onRemoveContactPress}
      key={item.id}
      index={index}
    />}
/>

而函数onRemoveContactPress 使用scrollToIndex 属性处理滚动（不要忘记传递index）

onRemoveContactPress = (index) => {
    this.flatListRef.scrollToIndex({ animated: true, index: index });
}

如果scrollToIndex 不滚动到正确的索引尝试将索引更改为其他内容（“玩”这个）
以我为例，它在 RTL 方向，所以它看起来像这样：index: this.state.contact.length - index - 1

【讨论】：

感谢您的意见@idan，将对其进行正确测试并告诉您进展如何
测试了一些选项，但无法提供“完美”的解决方案，不确定您是否熟悉信使组创建行为，但如果您可以尝试一下并查看正在添加或删除的选定联系人
什么不适合你？以及现在的行为（使用我的代码）？