0

因此，我正在关注 Catalin Miron 的视频教程，内容是使用本机反应创建计时器（此处链接到视频）。但问题是视频播放到 9 分 57 秒，我的应用程序给了我这个错误：

Invariant Violation: inputRange must be monotonically non-decreasing NaN,NaN,NaN

这是我的 App.tsx（是的，这是一个打字稿反应原生项目）

import * as React from "react";
import {
  Vibration,
  StatusBar,
  Easing,
  TextInput,
  Dimensions,
  Animated,
  TouchableOpacity,
  FlatList,
  Text,
  View,
  StyleSheet,
} from "react-native";

const { width, height } = Dimensions.get("window");

const colors = {
  black: "#323F4E",
  red: "#F76A6A",
  text: "#ffffff",
};

const timers = [...Array(13).keys()].map((i) => (i === 0 ? 1 : i * 5));
const ITEM_SIZE = width * 0.38;
const ITEM_SPACING = (width - ITEM_SIZE) / 2;

export default function App() {
  const scrollX = React.useRef(new Animated.Value(0)).current;

  return (
    <View style={styles.container}>
      <StatusBar hidden />
      <Animated.View
        style={[
          StyleSheet.absoluteFillObject,
          {
            justifyContent: "flex-end",
            alignItems: "center",
            paddingBottom: 100,
          },
        ]}
      >
        <TouchableOpacity onPress={() => {}}>
          <View style={styles.roundButton} />
        </TouchableOpacity>
      </Animated.View>
      <View
        style={{
          position: "absolute",
          top: height / 3,
          left: 0,
          right: 0,
          flex: 1,
        }}
      >
       -----------------------------------------Problem Start 
        <Animated.FlatList
          data={timers}
          keyExtractor={(item) => item.toString()}
          horizontal
          bounces={false}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { x: scrollX } } }],
            { useNativeDriver: true }
          )}
          showsHorizontalScrollIndicator={false}
          snapToInterval={ITEM_SIZE}
          decelerationRate="fast"
          style={{ flexGrow: 0 }}
          contentContainerStyle={{
            paddingHorizontal: ITEM_SPACING,
          }}
          // eslint-disable-next-line @typescript-eslint/ban-types
          renderItem={(itemData: object, index: number) => {
            const inputRange = [
              (index - 1) * ITEM_SIZE,
              index * ITEM_SIZE,
              (index + 1) * ITEM_SIZE,
            ];

            const opacity = scrollX.interpolate({
              inputRange,
              outputRange: [0.4, 1, 0.4],
            });

            return (
              <View
                style={{
                  width: ITEM_SIZE,
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                <Animated.Text style={[styles.text, { opacity }]}>
                  {itemData.item}
                </Animated.Text>
              </View>
            );
          }}
        />
       -----------------------------------------Problem End
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.black,
  },
  roundButton: {
    width: 80,
    height: 80,
    borderRadius: 80,
    backgroundColor: colors.red,
  },
  text: {
    fontSize: ITEM_SIZE * 0.7,
    fontFamily: "monospace",
    color: colors.text,
    fontWeight: "900",
  },
});

除了打字稿，这个应用程序还使用 Expo 来工作请帮我找到一个解决方案，我查看了谷歌搜索和 github 页面，他们在谈论轮播而不是平面列表。提前谢谢你还要注意 const 值正在工作并且不是未定义的

4

0 回答 0