反应原生下拉刷新以获取数据答案

【问题标题】：React native pull down refresh to fetch data反应原生下拉刷新以获取数据
【发布时间】：2020-07-30 03:50:49
【问题描述】：

我正在使用 React native 来显示来自 fetch API 的数据。但是当数据更新时，它仍然显示旧数据。我很困惑如何在我的代码中进行下拉刷新。

class YourActivitiesScreen extends Component{
    constructor(props) {
        super(props);
        this.state = {
            activitiesList: [],   
        }
    };
    componentDidMount(){
        AsyncStorage.getItem('id_token').then(this.getData)
    }
    getData=(token)=>{
        console.log(token)
       fetch('http://192.168.0.1:8887/api/auth/activities/your',{
            method: 'POST',
            headers:{
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' +token,
            },
        })
        .then((response) => response.json())

        .then((res) => {
            if(res.yourActivity)
            {
                let yourActivity = res.yourActivity
                this.setState({activitiesList: yourActivity})
            }
        })
        .catch((e) => console.log('Error: ', e))
        }
        renderItem = (item) => {
            return (
              <TouchableOpacity
                onPress={() => 
                  this.props.navigation.navigate('Details',{activity: item})
                }
              >
                <View style={styles.item}>
                  <Text style={styles.itemtext}>{item.name} </Text>
                </View>
              </TouchableOpacity>
            );
          }
    render(){
        const listActivities = this.state.activitiesList

        return (
                <View stlye={styles.container}>
                    <SafeAreaView>
                        <FlatList
                            data = {listActivities}
                            renderItem={({ item }) => this.renderItem(item)}
                            keyExtractor={item => item.id}
                            style={styles.list}
                        />
                    </SafeAreaView>
                </View>
        )
        }
}

当我进行下拉动作时，我需要做些什么让 componentDidMount 再次运行吗？如果是的话，有人可以向我解释怎么做吗？

【问题讨论】：

您可以使用 refreshcontrol 进行下拉刷新，请参阅reactnative.dev/docs/refreshcontrol

标签： javascript react-native page-refresh

【解决方案1】：

请尝试在 FlatList 中使用 onRefresh 属性。参考：https://reactnative.dev/docs/flatlist#onrefresh 注意：在 FlatList 中使用 onRefresh 时，请确保正确设置 refreshing 属性。

Implement pull to refresh FlatList

【讨论】：

请查看此链接了解更多信息 - enappd.com/blog/…

【解决方案2】：

每次更新数据时都必须使用 extraData FlatList 属性。

extraData

用于告诉列表重新渲染的标记属性（因为它实现了PureComponent）。如果您的任何renderItem、Header、Footer 等函数依赖于 data 属性之外的任何内容，请将其粘贴在这里并一成不变地对待它。

使用activitiesList 对象设置extraData 属性：

render(){
  const listActivities = this.state.activitiesList

  return (
    <View stlye={styles.container}>
      <SafeAreaView>
        <FlatList
          data={listActivities}
          extraData={listActivities}
          renderItem={({ item }) => this.renderItem(item)}
          keyExtractor={item => item.id}
          style={styles.list}
        />
      </SafeAreaView>
    </View>
  )
}

【讨论】：