Question

我对React Native很新，我试图使用这个组件： https://github.com/archriss/react-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%'
        />
    );

其中＆＃34;条目＆＃34;是一个数组。这会导致以下错误：

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

我有同样的问题，我通过简单地设置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;

Answer 2

如果您深入研究react-native源代码，可以在文件AnimatedInterpolation.js中找到error source，它希望插值的inputRange是一个数组数组。所以我最好的猜测是react-native-snap-carousel使用itemWidth值来计算插值数据并将其传递给react-native的Animated组件。您可以在here中找到该实现。如果为itemWidth提供非整数值，则计算将始终返回NaN，从而产生该错误。

简短回答：将itemWidth替换为实际数字。

React Native Snap Carousel：不变违规：inputRange必须单调增加NaN，NaN，NaN

2 个答案: