web-dev-qa-db-ja.com

React Native Animated.ScrollViewを使用すると、プログラムで特定の位置までスクロールできません

React-NativeおよびExpoの最新バージョンにアップグレードする前は、このコードブロックは機能していました。作業していたバージョンは"expo": "^32.0.0"。

以前はプログラムでAnimated.ScrollViewの子を移動できましたが、現在は移動できません。これが私がテストしている私のテストコードブロックです。

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  TouchableOpacity,
  SafeAreaView,
  ScrollView
} from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleMove = () => {
    this.scroller.getNode().scrollTo({
      x: 200,
      y: 0,
      animated: false
    });
  };
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Animated.ScrollView
          horizontal
          ref={scroller => {
            this.scroller = scroller;
          }}
        >
          <View
            style={{
              height: 100,
              width: 100,
              backgroundColor: 'red',
              margin: 5
            }}
          />
        </Animated.ScrollView>
        <TouchableOpacity onPress={this.handleMove}>
          <Text>Move</Text>
        </TouchableOpacity>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {}
});

コードブロックをアップグレードすると、最新バージョンでは動作しなくなります。私がテストしている現在のバージョンは：

"dependencies": {
    "expo": "^34.0.1",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-web": "^0.11.4"
  },

これを行う正しい方法は何ですか？

私は問題を説明するのに役立つスナックを追加しました。 ' https://snack.expo.io/@louis345/brave-banana

react-nativescrollview
9
Louis345

小道具をscrollViewに追加することで問題を解決できました。 scrollToOverflowEnabled={true}

これで、すべてがかつてのように機能します。これが将来の誰かの助けになることを願っています。

1
Louis345

0.57から0.60にアップグレードした後、同様の問題が発生しました。

マウントのタイミング（RNバージョン間）で何か変わったようです。もうすぐ廃止予定のライフサイクル関数のいくつかを使用していると思われるため、もう一度（数日で）コードを確認します。それらが現在「安全でない」と見なされているという事実は、いくつかのタイミングの問題（ワイルドな推測）が原因である可能性があります。

ScrollToを100msのタイムアウトに設定するだけで、コードを機能させることができました。これは、スクロールビューが最初の試行で完全にマウントされていないことを示しています。私のユースケースのタイムアウトは実際には問題ありませんが、私はハッキーソリューションが好きではないので、とにかくこれを解決したいと思います。

0
Michael

あなたはこれを試すことができます

<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
  scrollEventThrottle={1} // <-- Use 1 here to make sure no events are ever missed
  onScroll={Animated.event(
    [
      {
        nativeEvent: {
          contentOffset: {x: 200,y: 0},
        },
      },
    ],
    {useNativeDriver: true}, // <-- Add this
  )}>
  {content}
</Animated.ScrollView>
0
hong developer

1秒の単純なsetTimeoutを使用してこれを機能させることができました。

これが私のコードが今どのように見えるかです：

setTimeout(() => {
  this.scrollView.scrollTo({
    x: DEVICE_WIDTH * current_index,
    y: 0,
    animated: false
  });
}, 1)

Michealが上で提案したのと同様に、これは、Reactの非推奨のcomponentWillMountがScrollViewで適切に更新されなかったため、マウントの問題が原因で発生した可能性があります。

0
Monte Thakkar