2017-02-05 18 views
11

アニメーションScrollViewを作成するAnimated.createAnimatedComponent(ScrollView)を使用している場合、それはscrollToを使用することはできません長い上で定義されていません。 this.list.scrollTo({x: 0, y: 0})を呼び出すscrollToは、アニメーションScrollView

const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView); 

<AnimatedScrollView ref={(ref) => this.list = ref}> 
    <View style={{height: 1000}} /> 
</AnimatedScrollView> 

は、次のエラーを与える:

_this.list.scrollTo is not a function

それは通常のScrollViewに正常に動作します。これを解決する方法はありますか? this.list.scrollTo({x: 0, y: 0})が動作するはず呼び出し、その後

ref={(ref) => this.list = ref._component} 

答えて

2

は今のために働くかもしれないが、それを行うための正しい方法はありません - 経験則として、私たちはこれらが頻繁に変更される場合があります直接としてプライベート変数にアクセスすることはありません。 (編集:なし無礼の:-))

によりthis pull requestに、取得の新しい、将来性の方法は、ラップコンポーネントのrefはプライベート変数にアクセスすると、getNode()ユーティリティメソッドを使用することです(_前に付加)は安全ではありません将来のAPI変更から

だから、それを行うための新しい方法は、それが働いてしまった

+0

getNode()でうまく見つかりました。私は 'ref = {c => this.myRef = c.getNode()}'に書き直すことができるので、常に 'getNode()'を呼び出す必要はありません。 –

+0

私は実際にそれを試みましたが、未定義のエラーが発生しました - その時点でデバッグする時間がありませんでしたが、もし答えが得られれば自由に編集できます:-) – jhm

+0

アニメーションスクロールビューを使って、この情報を把握していただきありがとうございます。 1つの注意点は 'ref = {ref => this.scrollView = ref.getNode()}'は私のためには動作しませんが、 'this.scrollView.getNode()。scrollTo()'はうまくいきます。 – Nathan

18

Animated.createAnimatedComponentメソッドからコンポーネントのリターンの参照を取得するには、これを試してみてください。 max23_の答え@

+0

:-)

this.myRef.getNode().scrollToOffset({ y: 0, animated: true, });

をやって、

ref={c => (this.myRef = c)}

してからメソッドを呼び出すことで、おかげでたくさん:) – David

+1

私はこの解決策を使用するたびに、私はいつもthis.setStateを使用しようとするとエラーが発生します。 'ref = 'scrollRef''を呼び出し、scrollTo関数を使ってこれを呼び出します:' this.refs.scrollRef._component.scrollTo' – Danny

+0

私は同じ問題を抱えています、私はflatListを使っていました私のパスはref._component._listRef._scrollRefのように見えます。 –