S.H*_*ahi 5 reactjs react-native native-base react-native-flatlist
我有一个 React Native FlatList。基于我使用onViewableItemsChanged获取屏幕上当前显示项目的文档。但是在滚动或滚动停止时什么也没有发生，我无法获得当前的 ID。如何以正确的方式使用它？
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填充数据。为了解决这个问题，我运行了来自父组件的请求，并将其传递到类的构造函数props
中（如果填充了数组的状态）。
您应该考虑的另一件事是您应该FlatList在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>
);
};
}
| 归档时间： |
|
| 查看次数： |
7513 次 |
| 最近记录： |