Question

滚动到达某个位置时，如何更改React Native ScrollView的{ 'posts' : { '-firebase list key':{ '$key': 'key', 'text': 'sometext' }, '-firebase list key':{ '$key': 'key', 'text': 'sometext' }, '-firebase list key':{ '$key': 'key', 'text': 'sometext' } } }参数的bool值？

我在ScrollView中有一个ScrollView，而内部ScrollView由于外部ScrollView而没有响应。当scrollEnabled param设置为外部ScrollView的scrollEnabled时，Inner ScrollView可以正常工作。我的想法是当到达底部时将外部ScrollView动态设置为False。我该怎么做。

谢谢，

Answer 1

有两种方法可以实现此目的。如@binchik所述，第一个是将scrollEnabled设置为状态变量，并在必要时更新状态。当然，这会触发重新渲染，这可能会出现问题。第二种方法是直接更新ScrollView组件上的prop，而无需重新渲染。您可以这样做：

class DisableScrollWithoutRerender extends React.Component {
  listRef = React.createRef();
  ...
  render() {
    return <ScrollView ref={this.listRef} />;
  }

  disableScroll() {
    const { current: list } = this.listRef;
    list.setNativeProps({ scrollEnabled: false });
  }
}

我个人建议在负担得起重新渲染的情况下坚持第一种选择，除非您真正需要它，否则应避免第二种选择。

Answer 2

ScrollView组件有一个道具回调函数onScroll: ({nativeEvent: {contentOffset: {y}}, contentSize: {height}})。

所以你的州可以有一个scrollEnabled变量。如果true等于或大于contentOffset.y，则将其设置为contentSize.height，否则设为false。

确保您不进行不必要的setState来电。因为它会使组件每次都重新渲染，即使前一个状态与新状态完全相同。

Answer 3

为您的滚动视图/列表视图提供ref。然后使用以下命令更改scrollEnabled值。

render() {
  return <ScrollView ref="scrollView" />;
}

onSomeEvent() {
  this.refs.scrollView.setScrollEnabled(true); // will enable scroll
}

在RN ScrollView中将scrollEnabled动态设置为False

3 个答案: