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：我也在寻找平滑解决方案。如果找到请更新。谢谢