反应原生“onViewableItemsChanged"滚动动态数据时不起作用 [英] React Native "onViewableItemsChanged" not working while scrolling on dynamic data
问题描述
我有一个 React Native FlatList.基于 文档 我使用了 onViewableItemsChanged 用于获取屏幕上当前显示的项目.但是在滚动或滚动停止时什么也没有发生，我无法获得当前的 ID.我该如何正确使用它?
I have a React Native FlatList. base on Documentation I used onViewableItemsChanged for getting the current showing item on the screen. but while scrolling or when scrolling stops nothing happens and I can't get the current Id. How Can I use it in correct way?
export default class TimeLine extends Component {
constructor(props) {
super(props);
this.renderTimeline = this.renderTimeline.bind(this);
this.state = {
timeline: [],
};
this.handleViewableItemsChanged = this.handleViewableItemsChanged.bind(this);
this.viewabilityConfig = {
itemVisiblePercentThreshold: 50,
};
}
...
renderTimelineList(timeline_data) {
return (
<Card key={timeline_data.unique_id}>
<CardItem style={styles.header}>
<Left>
<Icon type="MaterialIcons" name={this.timelineIcon(timeline_data.type)}/>
<Body>
<Text style={styles.header_title}>{timeline_data.title}</Text>
</Body>
</Left>
</CardItem>
<CardItem>
{this.renderTimeline(timeline_data)}
</CardItem>
<CardItem>
<Left>
<Icon small name="time" style={styles.small_font}/>
<Text note style={styles.small_font}>{timeline_data.release_date}</Text>
</Left>
<Right>
<Text note style={styles.small_font}>{timeline_data.duration}</Text>
</Right>
</CardItem>
</Card>
);
}
render() {
return (
<Container>
<Content>
<FlatList
key={this.state.key}
onViewableItemsChanged={this.handleViewableItemsChanged}
viewabilityConfig={this.viewabilityConfig}
data={this.state.timeline}
renderItem={({item}) => this.renderTimelineList(item)}
/>
</Content>
</Container>
);
};
}
推荐答案
我自己解决了这个问题.问题是因为我试图用 Ajax 填充数据.为了解决这个问题，我从 Parent 组件运行请求并将其传递到 props并且在类的构造函数中，如果为我的数组填充了状态.
I solved the problem myself.
The problem was because of I was trying to populate the data with Ajax.
To solve that I ran the request from the Parent component and passed it in props
and inside the constructor of the class if filled the state for my array.
您应该考虑的另一件事是您应该在 View 中渲染整个 FlatList.
Another thing that you should consider is that you should render the whole FlatList inside a View.
这是我的最终代码:
export default class TimeLine extends Component {
constructor(props) {
super(props);
this.viewabilityConfig = {
minimumViewTime: 500,
viewAreaCoveragePercentThreshold: 60,
};
}
render() {
const {timeline} = this.state;
return (
<View style={styles.container}>
<FlatList
data={timeline}
renderItem={({item}) => this.renderTimelineList(item)}
viewabilityConfig={this.viewabilityConfig}
onViewableItemsChanged={({viewableItems}) => this.handleViewableItemsChanged(viewableItems)}
/>
</View>
);
};
}
这篇关于反应原生“onViewableItemsChanged"滚动动态数据时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
