2

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

我确实在 ScrollView 中有一个 ScrollView，并且由于外部 ScrollView，内部 ScrollView 没有响应。scrollEnabled当参数设置为False外部 ScrollView时，内部 ScrollView 起作用。我的想法是将外部 ScrollView 动态设置为scrollEnabled={false}到达底部时。我该怎么做呢。

谢谢，

4

3 回答 3

8

有两种方法可以做到这一点。第一个，如@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 });
  }
}

就我个人而言，我建议在重新渲染负担得起的情况下坚持第一个选项，并避免使用第二个选项，除非它正是您需要的。

于 2018-09-18T22:34:28.163 回答
1

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

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

onSomeEvent() {
  this.refs.scrollView.setScrollEnabled(true); // will enable scroll
}
于 2017-02-13T13:31:03.640 回答
0

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

所以你可以scrollEnabled在你的状态下有一个变量。并将其设置为trueifcontentOffset.y等于或大于contentSize.heightandfalse否则。

确保您不会拨打不必要setState的电话。因为即使之前的状态与新的状态完全相同，它也会让组件每次都重新渲染。

于 2017-02-12T17:03:56.670 回答