実際の動作:
私は反応ネイティブでポッドキャスト再生アプリケーションに取り組んでおり、それにトラックプレーヤーを実装しています。プレーヤー画面でポッドキャストを再生するときに、次のアイコンを 2 回タップし、現在プレーヤー画面で再生されているポッドキャストのトピック画面に移動すると、FlatList から再生されているポッドキャスト アイテムまでスクロールする必要があります。トピック画面をハイライト表示します。
このために、FlatList のscrollToIndexメソッドを FlatList のgetItemLayout prop と組み合わせて使用し、現在再生中のポッドキャスト アイテムのインデックスをメソッドに渡しました。しかし、メソッドは期待どおりに機能せず、間違った位置にスクロールしています。また、役に立たない多くの回避策を試しました。
予想される動作:
プレーヤー画面のトピック画面から再生中の特定のポッドキャスト項目までスクロールし、それを強調表示することになっています。誰か助けてください。前もって感謝します。
私が試したこと:
<FlatList
showsVerticalScrollIndicator={false}
style={{ marginLeft: 20, marginRight: 20 }}
ref={(ref) => {
this.flatListRef = ref;
}}
initialScrollIndex={insights.length > 50 ? 50 : 40}
initialNumToRender={2}
getItemLayout={this.getItemLayout}
data={insights}
extraData={this.state}
stickyHeaderIndices={[0]}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
ListHeaderComponent={playAll ? null : this._renderHeader}
ItemSeparatorComponent={ListSeparator}
contentContainerStyle={{...Styles.listBottomSpace}}
legacyImplementation={false}
windowSize={20}
maxToRenderPerBatch = {1}
removeClippedSubviews={false}
onScrollToIndexFailed={(error) => {
this.flatListRef.scrollToOffset({ offset: error.averageItemLength *
error.index, animated: false });
setTimeout(() => {
if (insights.length !== 0 && this.flatListRef !== null) {
this.flatListRef.scrollToIndex({ index: error.index, animated: false
});
}
}, 100);
}}
/>
getItemHeight = (event) => {
if (!this.itemHeight) {
const { height } = event.nativeEvent.layout;
this.itemHeight = height;
}
};
getItemLayout = (data, index) => {
let height = this.itemHeight ? this.itemHeight : 100;
return { length: height, offset: height * index, index };
};
scrollToItem = (insights) => {
const { currentTrack } = this.props;
let activeInsight = currentTrack ? lodash.findIndex(insights, (insight) => {
return (insight.insight_id === Number(currentTrack.id) && insight.insight_title ===
currentTrack.title)
}) : -1;
this.flatListRef &&
activeInsight > -1 &&
this.flatListRef.scrollToIndex({
animated: false,
index: activeInsight,
viewPosition: 0.5,
})
};
環境 :
"react": "16.8.3", "react-native": "0.59.9", "MacOS": "10.15.3"