反应天然快照旋转木马:不变的违规:输入必须单调地增加Nan，Nan，Nan

Question

我非常新手对本机进行反应，我正在尝试使用此组件：https://github.com/archriss/reaeact-native-snap-carousel

我尝试使用它们在用法部分中提供的代码来创建最简单的工作版本：

    return (
        <Carousel
          ref={(c) => { this._carousel = c; }}
          data={this.state.entries} // this seems to be the problem
          renderItem={this._renderItem}
          sliderWidth='100%'
          itemWidth='80%'
        />
    );

其中"条目"是一个数组。这会导致以下错误：

Invariant Violation: inputRange must be monotonically increasing NaN,NaN,NaN

编辑：这是_renderitem方法

_renderItem ({item, index}) {
    return (
        <View style={styles.slide}>
            <Text style={styles.title}>{ item.title }</Text>
        </View>
    );
  }

Answer 1

如果您进一步挖掘了反应源代码，则可以在文件 AnimatedInterpolation.js中找到错误源，以期望在其中插值输入为数字数组。因此，我最好的猜测是React-Native-SNAP-Carousel使用itemWidth值来计算插值数据并将其传递给React-Native的动画组件。您可以在此处找到该实现。如果您为itemWidth提供了非全能值，则计算将始终返回NAN，创建该错误。

简短答案：用实际号码替换itemWidth。

2020年1月16日更新：较新版本的反应本地更改消息，因此我相应地更新了链接并添加了原始代码：

AnimatedInterpolation.js内部处理程序（反应 - 本地V0.61.5）

function checkValidInputRange(arr: Array<number>) {
  invariant(arr.length >= 2, 'inputRange must have at least 2 elements');
  for (let i = 1; i < arr.length; ++i) {
    invariant(
      arr[i] >= arr[i - 1],
      /* $FlowFixMe(>=0.13.0) - In the addition expression below this comment,
       * one or both of the operands may be something that doesn't cleanly
       * convert to a string, like undefined, null, and object, etc. If you really
       * mean this implicit string conversion, you can do something like
       * String(myThing)
       */
      'inputRange must be monotonically non-decreasing ' + arr,
    );
  }
}

使用sliderWidth的功能，并在React-Native-Snap-Carousel（v3.8.4）中传递至inputRange

_initPositionsAndInterpolators (props = this.props) {
        const { data, itemWidth, itemHeight, vertical } = props;
        const sizeRef = vertical ? itemHeight : itemWidth; // USAGE
        // ...
        this._getCustomData(props).forEach((itemData, index) => {
            const _index = this._getCustomIndex(index, props);
            const start = (_index - 1) * sizeRef;          // HERE
            const middle = _index * sizeRef;               // HERE
            const end = (_index + 1) * sizeRef;            // AND HERE
            const animatedValue = this._shouldAnimateSlides(props) ? this._scrollPos.interpolate({
                inputRange: [start, middle, end],
                outputRange: [0, 1, 0],
                extrapolate: 'clamp'
            }) : 1;
            this._positions[index] = {
                start: index * sizeRef,
                end: index * sizeRef + sizeRef
            };
            interpolators.push(animatedValue);
        });
        this.setState({ interpolators });
    }

Answer 2

我遇到了同样的问题，我也只需设置ItemHeight即可解决。问题也可能来自您试图将宽度和高度指定为屏幕的相对大小，并且可能只需数字。

。

return (
    <Carousel
      data={this.state.entries}
      renderItem={this._renderItem}
      sliderWidth={sliderWidth}
      itemWidth={sliderWidth}
      itemHeight={itemHeight}
    />
);
const sliderWidth = Dimensions.get('window').width;
const itemHeight = Dimensions.get('window').height;