在 RN ScrollView 中动态设置 scrollEnabled 为 False

Question

当滚动到某个位置时scrollEnabled如何更改 React Native ScrollView 参数的布尔值？

我在 ScrollView

中确实有一个 ScrollView，并且由于外部 ScrollView 而内部 ScrollView 没有响应。当scrollEnabled参数设置为外部滚动视图的False时，内部滚动视图有效。我的想法是动态设置外部滚动视图，以便在到达底部时scrollEnabled={false}。我该怎么做。

谢谢

Answer 1

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

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

提供对滚动视图/列表视图的ref。 ，然后使用以下更改滚动启用值。

render() {
  return <ScrollView ref="scrollView" />;
}
onSomeEvent() {
  this.refs.scrollView.setScrollEnabled(true); // will enable scroll
}

Answer 3

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

因此，您可以在您的状态中有一个 scrollEnabled 变量，并将其设置为 true 如果contentOffset.y等于或大于contentSize.height，否则false。

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