任何状态更改时FlatList ScrollView错误 - 不变违规：不支持动态更改onViewableItemsChanged

Question

当应用程序中存在状态更改时，onViewableItemsChanged似乎不起作用。它是否正确？

似乎在这种情况下它不会非常有用......

否则，用户将被迫向我们onScroll，以确定位置或类似的东西......

Steps to Reproduce

1. 请参考snack
2. Repo也已上传到github
3. 使用onViewableItemsChanged时，任何状态更改都会产生错误
4. 这个错误甚至意味着什么？

注意：将onViewableItemsChanged函数放在渲染方法之外的const中也没有帮助...

       <FlatList
                data={this.state.cardData}
                horizontal={true}
                pagingEnabled={true}
                showsHorizontalScrollIndicator={false}
                onViewableItemsChanged={(info) =>console.log(info)}
                viewabilityConfig={{viewAreaCoveragePercentThreshold: 50}}
                renderItem={({item}) =>
                    <View style={{width: width, borderColor: 'white', borderWidth: 20,}}>
                        <Text>Dogs and Cats</Text>
                    </View>
                }
            />

Actual Behavior

错误

Answer 1

您必须将函数传递给绑定在组件构造函数中的onViewableItemsChanged，并且必须将viewabilityConfig设置为Flatlist之外的常量。

例：

class YourComponent extends Component {

    constructor() {
        super()
        this.onViewableItemsChanged.bind(this)
    }

    onViewableItemsChanged({viewableItems, changed}) {
        console.log('viewableItems', viewableItems)
        console.log('changed', changed)
    }

    viewabilityConfig = {viewAreaCoveragePercentThreshold: 50}

    render() {
        return(
          <FlatList
            data={this.state.cardData}
            horizontal={true}
            pagingEnabled={true}
            showsHorizontalScrollIndicator={false}
            onViewableItemsChanged={this.onViewableItemsChanged}
            viewabilityConfig={this.viewabilityConfig}
            renderItem={({item}) =>
                <View style={{width: width, borderColor: 'white', borderWidth: 20,}}>
                    <Text>Dogs and Cats</Text>
                 </View>}
          />
        )
    }
}

Answer 2

将viewabilityConfig对象移动到构造函数。

constructor() {
    this.viewabilityConfig = {
        viewAreaCoveragePercentThreshold: 50
    };
}

render() {
     return(
        <FlatList
            data={this.state.cardData}
            horizontal={true}
            pagingEnabled={true}
            showsHorizontalScrollIndicator={false}
            onViewableItemsChanged={(info) =>console.log(info)}
            viewabilityConfig={this.viewabilityConfig}
            renderItem={({item}) =>
                <View style={{width: width, borderColor: 'white', borderWidth: 20,}}>
                    <Text>Dogs and Cats</Text>
                </View>
            }
        />
    )
}

Answer 3

有人建议使用Flatlist的extraData属性让Flatlist注意到，有些东西发生了变化。

但这对我不起作用，这对我有用：

使用key={this.state.orientation}而orientation例如是“肖像”或“风景”......它可以是你想要的一切，但如果方向改变了它必须改变。如果Flatlist注意到key-property已更改，则会重新呈现。

适用于反应原生0.56

Answer 4

删除viewabilityConfig prop到渲染函数之外的const值以及onViewableItemsChanged函数