如何使用 refs 在平面列表上设置回调?

Question

>我正在尝试使用refs来命令性地设置我的 FlatList 的onEndReached道具。有没有办法做到这一点？

我修改了 PR PR 中的一个示例，该示例添加了setNativeProps，该示例在间隔内将颜色从黑色切换到白色，但无法调用onEndReached或onScroll。

谁能帮助我了解我做错了什么？

export default class Testing extends React.Component {
componentDidMount() {
let tick = 0
this.list.setNativeProps({
onEndReached: info => {
// NEVER CALLED 😢
console.log('L231 on Scroll info ===', info)
},
onScroll: info => {
// NEVER CALLED 😢
console.log('L250 info ===', info)
},
// Background DOES flash red on load... 🤔 
style: { backgroundColor: 'red' }
})
setInterval(() => {
this.list.setNativeProps({
onEndReached: info => {
console.log('L231 on Scroll info ===', info)
},
// Background DOES toggle black and white... 🤔 
style: { backgroundColor: tick++ & 2 ? 'white' : 'black' }
})
}, 1000)
}
render() {
return (
<View style={styles.container}>
<FlatList
ref={component => (this.list = component)}
style={{ backgroundColor: 'black' }}
data={[{ key: 'a' }, { key: 'b' }]}
renderItem={({ item }) => <Text>{item.key}</Text>}
/>
</View>
)
}
}

我尝试过的事情

直接在this.list👎上设置onEndReached

export default class Testing extends React.Component {
componentDidMount() {
this.list.onEndReached = info => {
// NEVER CALLED 😢
console.log(info)
}
}

Answer 1

我遇到了一个非常相似的问题，解决这个问题的一种方法是使用高阶组件 (HOC(。使用 HOC，您可以以最小的入侵覆盖您想要的任何道具。

HOC 示例/信息