React-Native ScrollView 在 setState 上丢失了位置答案

【问题标题】：React-Native ScrollView lost position on setStateReact-Native ScrollView 在 setState 上丢失了位置
【发布时间】：2017-10-02 05:55:41
【问题描述】：

我需要在 ScrollView 中更改一行的状态（在 ListView 中相同），但使用组件的 setState 会使滚动将其位置重置为顶部。

          <ScrollView
        {...this.panResponder.panHandlers}
        bounces={false}
        onScroll={() => {
          this.scrollIsScrolling = true;
        }}
        onTouchEnd={() => {
          this.scrollIsScrolling = false;
        }}
        onMomentumScrollEnd={() => {
          this.scrollIsScrolling = false;
        }}
        scrollEnabled={this.state.scrollEnabled}
        removeClippedSubviews={false}
        enableEmptySections
        style={styles.listView}
      >
        {this.props.settings.map((setting, i) => {
          return (
            <IntegrationSlideupCell
              key={i}
              title={setting.title}
              selected={this.state.selectedSetting === i}
              selectedGradient={this.props.integration.selectedGradient}
              onPress={() => {
                this.setState({ selectedSetting: i });
              }}
            />
          );
        })}
      </ScrollView>

UPD：删除自定义 panHandlers、onScroll、onTouchEnd、onMomentumScrollEnd 处理程序和其他道具没有区别。导致它设置状态的唯一原因。

【问题讨论】：

您是否尝试在滚动视图上保存内容大小 onContentSizeChange？
不，我没有。但是即使大小发生了变化，iOS 滚动视图（本机视图）也会保持位置。所以我也有同样的期待。不过我会试试的，谢谢你的建议。
为什么不引入scrollToIndex() 功能？
目前通过在使用 setState 之前存储偏移量来修复。但请继续调查。

标签： ios react-native scrollview react-native-ios setstate

【解决方案1】：

使用偏移方法，如果给定“IntegrationSlideupCell”一个固定的高度，那么您可以偏移该宽度并将偏移存储到状态

this.state = {
    contentOffset: {y: 0},
}

function handlePress() {
   offset = HEIGHT_OF_CONTAINER;
   newOffset = this.state.contentOffset.y + offset;    
   this.setState({contentOffset: {y: newOffset}, selectedSetting: i });
} 

          <ScrollView
    {...this.panResponder.panHandlers}
    bounces={false}
    contentOffset={this.state.contentOffset}
    onScroll={() => {
      this.scrollIsScrolling = true;
    }}
    onTouchEnd={() => {
      this.scrollIsScrolling = false;
    }}
    onMomentumScrollEnd={() => {
      this.scrollIsScrolling = false;
    }}
    scrollEnabled={this.state.scrollEnabled}
    removeClippedSubviews={false}
    enableEmptySections
    style={styles.listView}
  >
    {this.props.settings.map((setting, i) => {
      return (
        <IntegrationSlideupCell
          key={i}
          title={setting.title}
          selected={this.state.selectedSetting === i}
          selectedGradient={this.props.integration.selectedGradient}
          onPress={handlePress.bind(this)}
        />
      );
    })}
  </ScrollView>

【讨论】：