1

我试图用命令式refs地设置onEndReached我的 FlatList 的道具。有没有办法做到这一点？

我已经修改了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)
    }
  }
4

1 回答 1

0

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

HOC 示例/信息

于 2020-08-07T20:22:55.497 回答