@kirasuka1109posted at 2025-10-20

reactで既存のアプリにフリックで日付変更機能の追加

Q&A

React react-native-gesture-handler react-native-reanimated

解決したいこと

今reactで画面フリック機能を作成しているのですがフリック自体はできたのですが日付の挙動が
12日の画面で右フリック11日の画面に行き日付の表示が11日→12日→11日といった挙動になってしまします
おそらく原因は再レンダリングがどこかで起こっているのかなと考えているのですが原因のわかる人はいるでしょうか？
react-native-reanimated
react-native-gesture-handler
を使用しています

発生している問題・エラー

エラーメッセージは出ておりません

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

ここでフリックの機能を作成しています

const changeDate = (days: number) => {
    const currentDate = moment(selectedDate);
    const newDate = currentDate.add(days, 'days');
    const newDateString = newDate.format('YYYY-MM-DD');
    setSelectedDate(newDateString);
  };

  const panGesture = Gesture.Pan()
    .activeOffsetX([-10, 10])
    .activeOffsetY([-10, 10])
    .onUpdate((event) => {
      translateX.value = -SCREEN_WIDTH + event.translationX;
    })
    .onEnd((event) => {
      const shouldChangeDate =
        Math.abs(event.translationX) > SWIPE_THRESHOLD ||
        Math.abs(event.velocityX) > VELOCITY_THRESHOLD;

      if (shouldChangeDate) {
        if (event.translationX > 0) {
          // 前日
          translateX.value = withSpring(0, { damping: 20, stiffness: 90 }, () => {
            translateX.value = -SCREEN_WIDTH;
            runOnJS(changeDate)(-1);
          });
        } else {
          // 翌日
          translateX.value = withSpring(-SCREEN_WIDTH * 2, { damping: 20, stiffness: 90 }, () => {
            translateX.value = -SCREEN_WIDTH;
            runOnJS(changeDate)(1);
          });
        }

自分で試したこと

再レンダリング時間がかぶっているのかと思い

settimeout(()
),100

や

const eventsCarousel = () => (
    <GestureDetector gesture={gesture}>
      <Animated.View style={[{ flex: 1 }, styles.carouselContainer, animatedStyle]}>
        <View style={styles.page}>{eventsData(displayDates.prev)}</View>
        <View style={styles.page}>{eventsData(displayDates.current)}</View>
        <View style={styles.page}>{eventsData(displayDates.next)}</View>
      </Animated.View>
    </GestureDetector>
  );

displayDatesでまとめるなどしてみたのですが解決しなくお力添えをお願いします。

0 likes

Are you sure you want to delete the question?