React Native 中 FlatList 上的无效框架 `frame.index`

Question

在处理我的项目时，我遇到了一个相当独特的错误

Warning: Failed frame type: Invalid frame `frame.index` of type `string` supplied to `VirtualizedList.getItemLayout`, expected `number`.

所以有了上面的警告，它应该在 getItemLayout 的某个地方，这里是代码：

getItemLayout={(data, index) => {
    return {index, length: 45, offset: 45 * index}
}}

我摆弄了一下代码，但没能弄清楚哪里出了问题。任何人都通过任何更改遇到此错误或知道可能导致此错误的原因吗？

完整代码：

const renderItem = ({ item, index }) => (
    <TouchableOpacity onPress={() => onDatePressItem(item, index)}>
        {selectedDate === item ? (
        <View style={styles.selectedDateContainer}>
            <Text style={styles.selectedDateText}>{moment(item).format('D')}</Text>
            <Text style={styles.selectedDateText}>{moment(item).format('MMM')}</Text>
        </View>
        ) : (
        <View style={styles.unselectedDateContainer}>
            <Text style={styles.unselectedDateText}>{moment(item).format('D')}</Text>
            <Text style={styles.unselectedDateText}>{moment(item).format('MMM')}</Text>
        </View>
        )}
   </TouchableOpacity>
);

return (
    <View style={styles.container}>
        <FlatList
            horizontal
            showsHorizontalScrollIndicator={false}
            data={data}
            keyExtractor={(date, index) => `${date + index}`}
            contentContainerStyle={styles.flatListStyle}
            initialScrollIndex={closestIndex}
            getItemLayout={(data, index) => {
                return {index, length: 45, offset: 45 * index}
            }}
            ref={listRef}
            renderItem={renderItem}
        />
    </View>
)

Answer 1

所以我尝试复制你的代码，除了几行之外一切似乎都很好

    const data = ['0', '1'];

    const App: () => Node = () => {
      return (
        <SafeAreaView>
          <FlatList<string>
            horizontal
            showsHorizontalScrollIndicator={false}
            data={data}
            keyExtractor={(date, index) => `${date + index.toString()}`}
            initialScrollIndex={0}
            getItemLayout={(_, index) => {
              return {index, length: 45, offset: 45 * index};
            }}
            renderItem={({item}) => <Text>{item}</Text>}
          />
        </SafeAreaView>
      );

这一行

keyExtractor={(date, index) => `${date + index.toString()}`}

typescript 不喜欢连接日期 + 索引。

我也无法复制这条线

initialScrollIndex={closestIndex}

因为你没有提供 closestIndex 变量，所以我最好的选择是这个 bug 可能在这个变量中。

React Native 中 FlatList 上的无效框架 `frame.index`

Invalid frame `frame.index` on FlatList in React Native

react-native

react-native-flatlist