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

Question

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

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

现在，列表启用了下拉刷新，所以我想滚动到 iOS 中的刷新指示器上方。

我试过：

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

并将带有 ref 的 RefreshControl 声明为 refreshcontrol（使用回调 ref 声明）：

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

和

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

但是 none 有效。有人知道我可以在刷新指示器上方滚动的方法吗？这只发生在 iOS 中，因为 Android 的刷新指示器工作方式不同。

更新：

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

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

仍然滚动到列表的开头，但 "RefreshControl" 在视觉上被隐藏了。

我也试过在上面添加一个空的ScrollView，然后滚动到它上面，因为是空的，所以没有成功。有什么想法吗？

更新 2

澄清一下，这就是所有内容的调用方式（简体）：

_scrollAndRefresh 方法 Main.js:

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

渲染组件 Main.js:

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

_handleRefresh 方法 Main.js:

  _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});
    }
  }

和平面列表CustomFlatList.js：

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

Answer 1

我的应用程序中有这样的东西：

<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});

Answer 2

由于<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',
    }
});

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

React-native scroll to top with pull to refresh iOS

react-native

react-native-ios

更新 2：

结果：