React-Native 滚动时水平滚动跳跃

Question

所以我正在开发这个 react-native 应用程序，在这一部分中，我正在制作一个看起来很像日历的图表，实际上你可以水平滚动以查看不同的日期；您从今天开始在最右边，您可以向左滚动查看前几天。

我的问题是，当用户向左滚动时，图表会获取更多数据并扩展图表的大小。当它发生的那一天我正在寻找被插入的那一天，随着图表大小的变化，我发现我自己正在寻找不同的一天。

我试图让它在每次提取时一直滚动到顶部，但这一点都不方便。

我试图进行一些计算并跳转到我应该寻找的地方，但是每次获取并且图形大小发生变化时跳转并不是一个好的用户体验。我想有一个更用户友好的体验。

如果我的解释不好，请告诉我，也许我可以尝试更好地解释它。

谢谢，

这就是我的代码的样子

state = {
    filter: { startDate : new Date(new Date().setDate(new Date().getDate() - 2))}, 
    graphData: this.props.graphData
  };
var days;

  get initialScrollOffset(){
    const {startDate, endDate} = this.props
    const colCount = hourIntervals(this.state.filter.startDate, endDate).length
    const graphWidth = colCount * cellWidth
    const screenWidth = Dimensions.get('window').width
    //the 100 is to make up for padding and the left icons
    return screenWidth - graphWidth  + 100
  }

  componentDidMount() {
    setTimeout(() => {
      if(this.scrollView != null){
        this.scrollView.scrollToEnd()
      }
    }, 0.00001);
  }
  /**
   * Scroll all the way to the right of the ScrollView
   * This needs to be triggered at mount and again if the ScrollView changes size,
   * because its contents don't load all at once (if it's big).
   * This means there's some flicker and performance hit,
   * so we're only doing this on Android where contentOffset isn't supported
   * @returns {undefined}
   */

 androidAutoScroll = () => {
    if (Platform.OS === 'android' && this.scrollView) {
     this.scrollView.scrollToEnd()
    }
  }

  LastDaySummary

  render() {
    const {userData: userData} = this.props.graphData
    return (
      <View style={activityStyles.containerNoHorizontalPadding}>

        <Text style={activityStyles.h1}>Activity</Text>
        <View style={activityStyles.graphContainer}>
          <GraphRowIcons
            userData={userData}
          />

          <ScrollView
                horizontal
                contentOffset={{x: this.initialScrollOffset}}
                onContentSizeChange={this.androidAutoScroll}
                onMomentumScrollBegin = {(event) => {

               days += 10
               this.setState({filter: {startDate : new Date(new Date().setDate(new Date().getDate() - days))}}, ()=>{ //now fetching more days
               this.props.fetchGraphEvents(this.props.currentUser,  this.state.startDate)
               })

                  }
                }
              }
                ref={(scrollView) => { this.scrollView = scrollView }
                }
          >
            <GraphContentArea
              userData={userData}
              startDate={this.state.filter.startDate}//the graph is rendered starting from this date
              endDate={this.props.endDate}
            />
          </ScrollView>
        </View>
      </View>
    )
  }
}

Answer 1

您可以使用 onContentSizeChange更改内容大小后处理滚动偏移的事件。像

<ScrollView
  ref={ref => {this.scrollViewRef = ref;}}
  onScroll={this.onScroll}
  onContentSizeChange={this.onContentSizeChange}
>
  ... 
</ScrollView>

handleScroll = ({nativeEven}) => {
  this.scrollX = nativeEvent.contentOffset.x;
}

onContentSizeChange = (width, height) => {
  const newPositionX = this.scrollX - width - this.width;
  this.scrollViewRef.scrollTo({x: newPositionX, y: 0, animated: false});
  this.width = width;
}

这不会那么顺利，但会奏效。

P/s:我也在寻找平滑解决方案。如果你找到了请更新。谢谢