React-Native Горизонтальная прокрутка прыгает при прокрутке - PullRequest
Новая
       15

React-Native Горизонтальная прокрутка прыгает при прокрутке

2 голосов
/ 11 января 2020

Итак, я работаю над этим собственным приложением, в этой части я работаю над графиком, который очень похож на календарь, который вы можете прокручивать горизонтально, чтобы увидеть разные дни; к сегодняшнему дню вы начинаете очень далеко направо и можете прокручивать влево, чтобы увидеть предыдущие дни

Моя проблема в том, что, когда пользователь прокручивает до go влево, график извлекает больше данных и расширяет размер графика. и когда это происходит в тот день, когда я смотрю на меня, меня толкают, и я вижу, что при изменении размера графика я вижу другой день.

Я пытался прокручивать его до самого верха при каждом извлечении, но это совсем не удобно.

Я попытался составить некоторые расчеты и перейти к месту, где я должен искать, но это не очень хороший пользовательский опыт, чтобы прыгать каждый раз, когда он выбирает и изменяет размер графика. , Я хочу иметь более удобный для пользователя опыт.

Пожалуйста, дайте мне знать, если мое объяснение плохое, поэтому, возможно, я могу попытаться объяснить его лучше.

Спасибо,

и вот так выглядит мой код 



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>
    )
  }
}

1 Ответ

0 голосов
/ 13 января 2020

Вы можете использовать событие 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: Я также ищу решение сглаживания. Пожалуйста, обновите, если вы найдете один. Спасибо

...