如何在React Native ScrollView中使用refreshControl进行刷新?

lh80um4z  于 2023-10-22  发布在  React
关注(0)|答案(3)|浏览(121)

现在我想拉下一个scrollView并刷新这个组件,所以我遵循了react-native的官方文档中提到的onRefresh和RefreshContorol。
但是,我不知道为什么我的代码不工作,并得到错误.
下面的代码是我的代码。

<View style={styles.container}>
    <ScrollView
      contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap' }}
      refreshControl={<RefreshControl refreshing={this.state.refreshing}  onRefresh={this.setState({ refreshing: true })} />}
    >
      {this.renderItemBox()}
    </ScrollView>
  </View>
6rvt4ljy

6rvt4ljy1#

下面是示例代码,您可以在其中找到RefreshControllerScrollView的集成:

import { ScrollView, RefreshControl } from 'react-native';

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

  _onRefresh = () => {
    this.setState({refreshing: true});
    fetchData().then(() => {
      this.setState({refreshing: false});
    });
  }

  render() {
    return (
      <ScrollView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
          />
        }
      />
    );
  }

}
dzhpxtsq

dzhpxtsq2#

在我身上奏效了

import React from 'react';
import {
  RefreshControl,
  ScrollView,
  StyleSheet,
  View,
} from 'react-native';
import {WebView} from 'react-native-webview';

const wait = timeout => {
  return new Promise(resolve => setTimeout(resolve, timeout));
};

const Main = () => {
  const webViewRef = React.useRef();
  const [refreshing, setRefreshing] = React.useState(false);
  const [enablePTR, setEnablePTR] = React.useState(false);

  
  const onRefresh = React.useCallback(() => {
    webViewRef.current.reload();
    setRefreshing(true);
    wait(2000).then(() => setRefreshing(false));
  }, []);

  const handleEvent = e => {
    if (e.nativeEvent.contentOffset.y > 100) {
      setEnablePTR(false);
    } else {
      setEnablePTR(true);
    }
  };
  return (
    <View style={styles.container}>
      <ScrollView
        scrollEnabled={false}
        contentContainerStyle={styles.container}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            enabled={enablePTR}
          />
        }
      >
        <WebView
          source={{ uri: "https://example.com/" }}
          ref={(ref) => (webViewRef.current = ref)}
          javaScriptEnabled={true}
          injectedJavaScript="setTimeout(() => {document.addEventListener('scroll', function (event) {window.ReactNativeWebView.postMessage(JSON.stringify(document.getElementsByClassName('topconteiner')[0].scrollTop));},true);}, 300);true;"
          onScroll={(event) => handleEvent(event)}
        />
      </ScrollView>
    </View>
  );
};

export default Main;

const styles = StyleSheet.create({
  container: {backgroundColor: '#fff', flex: 1},
});
bwntbbo3

bwntbbo33#

import {ScrollView,RefreshControl,SafeAreaView} from 'react-native';
import React,{useState,useEffect} from 'react';

export default function App({ navigation }) {
const [refreshing,setRefreshing] =useState(false);

useEffect(()=>{
   pullToRefreshFunction() 
},[]}

const pullToRefreshFunction = () => {
     setRefreshing(true)
     ..... your api calling here..
     setRefreshing(false)
}

 return(
 <SafeAreaView style={{flex:1}}>
 <ScrollView  refreshControl={
   <RefreshControl
  refreshing={refreshing}
  onRefresh={pullToRefreshFunction }
/>}
>
</ScrollView>
</SafeAreaView>
}

相关问题