web-dev-qa-db-ja.com

React-Native：プルアップ時に呼び出されないFlatList onRefresh。

現在の動作：

ビューを引き上げて、サーバーから取得したリストを更新しようとしています。実行すると、onRefreshが起動しません。

GETリクエストをsetState関数のコールバックに設定しましたが、何もしなかったようです。

予想される動作：

ビューを引き上げると、onRefresh関数が呼び出されます。

コード：

...
  constructor(props) {
    super(props);
    this.state = {
      stories: [],
      isFetching: false,
    };
  }
  componentDidMount() { this.fetchData() }
  onRefresh() {
    this.setState({ isFetching: true }, function() { this.fetchData() });
  }
  fetchData() {
    var that = this;
    axios.get('http://192.168.0.13:3000/api/story/get/by/geo')
      .then((res) => {
        that.setState({ stories: res.data, isFetching: false });
        that.props.dispatch(StoryActions.setStories(res.data))
      })
  }
  render() {
    return (
      <ScrollView>
        <FlatList
          onRefresh={() => this.onRefresh()}
          refreshing={this.state.isFetching}
          data={this.state.stories}
          keyExtractor={(item, index) => item.id}
          renderItem={({item}) => (<StoryFeed story={item} id={item.id} /> )}
          />
      </ScrollView>
    )
  }

バージョン情報

反応ネイティブ：0.45.0

ノード：7.4.0

react-nativereact-native-flatlist
11
dmr07

React-Nativeに関する問題。 ScrollView内にネストされている場合、FlatListはonRefreshを検出しないようです：チケットの発行： https://github.com/facebook/react-native/issues/14756

5
dmr07

これが上位にランク付けされてからのコメント グーグル 私の検索のためにビング。

私の場合、別のFlatListの自動インポートがあり、私が望んだとおりに動作しませんでした（ "onRefresh"がないようです）。

import { FlatList } from 'react-native-gesture-handler';

私が本当に欲しかったもの：

import { FlatList } from 'react-native';

次に、この依存関係がある理由を調査します。 ;）

6
honeyp0t

私もこれに遭遇しました。作ることによって私の側でそれを解決しました

'StyleSheet、RefreshControl}を' react-native 'からインポートします。

...

orになる親コンポーネントのコードの下に追加

refreshControl = {

          <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={() => this.handleRefresh()}
          />

        }

...

1
anoNewb

ScrollViewの小道具としてRefreshControlを使用している可能性があります： 例とガイド

0
mohsen gharivand

私もしばらくの間この問題を抱えていました。 this expoの例で解決策を見つけました。

これはその例のスニペットです：

return (
      <ScrollView>
        <FlatList
          onRefresh={() => this.onRefresh()}
          refreshing={this.state.isFetching}
          data={this.state.stories}
          keyExtractor={(item, index) => item.id}
          renderItem={({item}) => (<StoryFeed story={item} id={item.id} /> )}
          />
      </ScrollView>
    )
0
Waweru wa Kamau