Question

我有一个本机应用程序，我想在iOS中刷新FlatList时滚动到顶部。我可以使用：

滚动到FlaList的顶部

this.componentRef.FlatList.scrollToOffset({x: 0, y: 0, animated: true});

现在，该列表已启用Pull-to-refresh，因此我想滚动iOS中的刷新指示器。

我试过了：

this.componentRef.FlatList.scrollToOffset({x: 0, y: -20, animated: true});

并使用ref作为refreshcontrol声明RefreshControl（使用回调引用声明）：

this.componentRef.FlatList.refreshcontrol.scrollToOffset({x: 0, y: 0, animated: true});

和

this.componentRef.refreshcontrol.scrollToOffset({x: 0, y: 0, animated: true});

但没有工作。是否有人知道我可以在刷新指示器上方滚动的方式，如果它在？这只发生在iOS中，因为Android的刷新指标的工作方式不同。

更新

由于scrollToOffset不适用于RefrehControl组件，因此它无法工作。这让我回到如何在FlatList中的RefreshControl上方滚动。我的最后一次尝试：

this.FlatList.scrollToOffset({x: 0, y: 0, animated: true});

仍然滚动到列表的开头，但是＆＃34; RefreshControl＆＃34;在视觉上是隐藏的。

我还尝试在上面添加一个空的ScrollView并滚动到它，因为它是空的，它不起作用。有什么想法吗？

更新2

澄清一下，这就是所谓的（简化）：

Main.js中的

_scrollAndRefresh方法：

  _scrollAndRefresh = () => {
     this.setState({
       loading: true
     }, () => {
       this.CustomFlatList._scrollToTop();
     });
  }

在Main.js中渲染组件：

  <CustomFlatList ref={(ref) => {
      this.CustomFlatList = ref}}
    onRefresh={this._handleRefresh} loading={this.state.loading}/>

Main.js中的

_handleRefresh方法：

  _handleRefresh = () => {
    this.setState({
      loading: true
    }, () => {
      // REFRESH ACTION
    })
  };

_scrollToTop方法CustomFlatList.js：

  _scrollToTop = () => {
    if (Platform.OS === 'ios' && this.props.loading) {
      this.FlatList.scrollToOffset({x: 0, y: 0, animated: true});
    }
    else {
      this.FlatList.scrollToOffset({x: 0, y: 0, animated: true});
    }
  }

FlatList CustomFlatList.js：

<FlatList
  ref={(ref) => { this.FlatList = ref; }}
  refreshControl={<RefreshControl
            refreshing={this.props.loading}
            onRefresh={this.props.onRefresh}
        />}
/>

Answer 1

由于<RefreshControl />检测到手势的刷新行为，<FlatList />滚动方法对它没有影响;而你只是试图破解它。

建议这样做。您仍然滚动到顶部并显示刷新，更直接：

constructor(props) {
  super(props);
  this.state = {
    refreshing: false,
  }
}

/// scroll to top, and show refresh at the same time
scrollToTopAndRefresh() {
  this.componentRef.FlatList.scrollToOffset({x: 0, y: 0, animated: true});
  this.setState({
    refreshing: true,
  }, () => {
    this.refresh();
  });
}

refresh() {
  /// put your refresh logic here
}

componentRef = {};
render() {
  return (
    <FlatList ref={ (ref) => this.componentRef.FlatList = ref }
      refreshControl={
        <RefreshControl
          refreshing={this.state.refreshing}
          onRefresh={() => this.refresh()}
        />
      }
    />
  );
}

更新2：

我为您的需求制作了一个简单易用的代码。

import React, { Component } from 'react';
import {
    Image,
    View,
    FlatList,
    Text,
    StyleSheet,
    Button,
    RefreshControl,
} from 'react-native';

export class App extends Component {
    constructor(props) {
        super(props);
        this.scrollToTopAndRefresh = this.scrollToTopAndRefresh.bind(this);
        this.doRefresh = this.doRefresh.bind(this);
        this.state = {
            refreshing: false,
        }
    }

    scrollToTopAndRefresh() {
        this.flatlistref.scrollToOffset({y: 0, animated: true});
        this.setState({refreshing: true}, this.doRefresh);
    }

    doRefresh() {
        /// do refresh work here /////
        //////////////////////////////
        setTimeout( () => this.setState({refreshing: false}), 1000);
    }

    flatlistref = null;
    render() {
        return (
            <View style={{flex: 1}}>
                <FlatList
                    ref={(ref) => this.flatlistref = ref}
                    data={Array(30).fill(1)}
                    renderItem={() => <Text style={styles.line}>This is one line.</Text>}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this.doRefresh}
                        />
                    }
                />
                <Button title='Scroll To Top' onPress={this.scrollToTopAndRefresh} />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    line: {
        height: 50,
        paddingTop: 17,
        textAlign: 'center',
        backgroundColor: 'orange',
        borderWidth: 1,
        borderColor: 'purple',
    }
});

结果：

Answer 2

我的应用程序中有类似的内容：

<FlatList
    refreshControl={
        <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={() => this._onRefresh()}
        />}
    data=...
/>

也许这样的事情会起作用：

this.componentRef.FlatList.scrollToOffset({x: 0, y: 0, animated: true});
this.setState({refreshing: true});
this._onRefresh();
this.setState({refreshing: false});

React-native滚动到顶部，拉动以刷新iOS

2 个答案:

更新2：

结果：