React Native で ScrollViews をネストしようとしています。水平スクロールとネストされた垂直スクロールです。
次に例を示します。
var Test = React.createClass({
render: function() {
return (
<ScrollView
style={{width:320, height:568}}
horizontal={true}
pagingEnabled={true}>
{times(3, (i) => {
return (
<View style={{width:320, height:568}}>
<ScrollView>
{times(20, (j) => {
return (
<View style={{width:320, height:100, backgroundColor:randomColor()}}/>
);
})}
</ScrollView>
</View>
);
})}
</ScrollView>
);
},
});
AppRegistry.registerComponent('MyApp', () => Test);
外側のスクロールバーは問題なく動作しますが、内側のスクロールバーは、動いているときにタッチすると動かなくなります。つまり、スクロールして、勢いよく動いている間に指を離してもう一度タッチすると、スクロールバーが停止し、タッチの動きにまったく反応しなくなります。さらにスクロールするには、指を離してもう一度タッチする必要があります。
これは非常に再現性が高いので、ジェスチャー レスポンダーと関係があるように感じます。
この問題を見た人はいますか?
これをデバッグするにはどうすればいいでしょうか? タッチに何が反応し、許可と解放がいつ行われるかを確認する方法はありますか?
ありがとう。
アップデート：
onResponderMove内側と外側のスクロールバーにリスナーを配置することで、レスポンダー システムのように見えます。
<ScrollView
onResponderMove={()=>{console.log('outer responding');}}
...
<ScrollView
onResponderMove={()=>{console.log('inner responding');}}>
...
外側の ScrollView が制御を取得していることは明らかです。問題は、垂直方向にスクロールしようとしたときに外側のスクロールが制御を取得するのをどうやって止めるか、ということだと思います。また、すでに動いている内側の ScrollView をスクロールしようとしたときにのみ、なぜこれが起こるのでしょうか。
ベストアンサー1
RN > 56.0 を使用している場合は、スクロール ビューに次のプロパティを追加するだけです。
<ScrollView nestedScrollEnabled = {true}>
......
<ScrollView nestedScrollEnabled = {true}>
.....
</ScrollView>
</ScrollView>
それが私にとって唯一効果があった方法です。