2

scrollEnabledスクロールが特定の位置に達したときに、React Native ScrollViewの param の bool 値を変更するにはどうすればよいですか?

ScrollView 内に ScrollView がありますが、外側の ScrollView が原因で内側の ScrollView が応答しません。内側の ScrollView は、scrollEnabledparam がFalse外側の ScrollView に設定されている場合に機能します。scrollEnabled={false}私の考えは、一番下に到達したときに外側の ScrollView を動的に設定することです。これを行うにはどうすればよいですか。

ありがとう、

4

3 に答える 3

8

これを行うには 2 つの方法があります。最初のものは、@binchik で説明されているように、scrollEnabled を状態変数に設定し、必要に応じて状態を更新することです。もちろん、これにより再レンダリングがトリガーされ、問題が発生する可能性があります。2 つ目の方法は、再レンダリングせずに 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 });
  }
}

個人的には、再レンダリングが手頃な場合は最初のオプションに固執し、2 番目のオプションは必要でない限り避けることをお勧めします。

于 2018-09-18T22:34:28.163 に答える
1

refスクロールビュー/リストビューにa を提供します。次に、以下を使用して 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したがって、状態に変数を含めることができます。が と等しいかそれ以上のtrue場合はに設定し、それ以外の場合は に設定します。contentOffset.ycontentSize.heightfalse

不必要な電話はかけないようにしましょうsetState。以前の状態が新しい状態とまったく同じであっても、毎回コンポーネントを再レンダリングするためです。

于 2017-02-12T17:03:56.670 に答える