Question

我有一个React Native FlatList。基于Documentation我使用 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>
    );
};
}

Answer 1

我自己解决了这个问题。问题是因为我试图用 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>
    );

};
}

Answer 2

确保正确实施keyExtractor（如果尚未实施，请实施）。

在我的情况下，func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { if searchController.searchBar.text != nil && searchController.searchBar.text != ""{ return filteredData.count }else{ return rowNames.count } } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell:CustomCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as! CustomCell if searchController.searchBar.text != nil && searchController.searchBar.text != ""{ cell.NameLabel.text = filteredData[indexPath.section].data[indexPath.row].value }else{ cell.NameLabel.text = rowNames[indexPath.section].data[indexPath.row].value cell.accesotytype = rowNames[indexPath.section].data[indexPath.row].selected ? .checkmark : .none } return cell } func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { let cell = tableView.cellForRow(at: indexPath) if searchController.searchBar.text == nil || searchController.searchBar.text == ""{ if rowNames[indexPath.section].data[indexPath.row].selected == true{ cell?.accessoryType = .none rowNames[indexPath.section].data[indexPath.row].selected = false }else{ cell?.accessoryType = .checkmark rowNames[indexPath.section].data[indexPath.row].selected = true } } //self.tableView.deselectRow(at: indexPath, animated: true) } //MARK: Search Delegate func updateSearchResults(for searchController: UISearchController) { if let searchText = searchController.searchBar.text, searchController.searchBar.text != "" { //maybe betters and faster way to make the search, even not keep the section name in the search IDK but that's unto you for row in rowNames{ let value = row.data.filter({ $0.value!.contains(searchText) }).map({$0}) let val = tableData(sectionName: row.sectionName, data: value) filteredData.append(val) } self.tableView.reloadData() } } }对许多孩子返回null，而keyExtractor不会为这些孩子派遣。

React Native＆＃34; onViewableItemsChanged＆＃34;滚动动态数据时无法正常工作

2 个答案: