如何使用引用在FlatList上设置回调？

Question

我试图使用refs来强制设置FlatList的onEndReached道具。有没有办法做到这一点？

我修改了一个example from the 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>
    )
  }
}

我尝试过的事情

直接在onEndReached?上设置this.list

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

Answer 1

我遇到了一个非常相似的问题，而解决此问题的一种方法是使用高阶组件（HOC）。借助HOC，您可以以最小的入侵覆盖所需的任何道具。

HOC Example/Info