如何解决按下时冻结,直到另一个 fetch api 在 React Native 中完成

问题描述

在 React Native 中,我注意到在 onPress 单击事件中冻结的问题,直到 api 调用结束并且数据返回为止。

例如,如果单击按钮仅显示警告消息或导航到另一个屏幕:

 <Button title="Click for other functionality"
              onPress={()=>{
                Alert.alert("Another click")
  }} />

API 调用正在从 jsonplaceholder 获取数据:

  baseURL = 'https://jsonplaceholder.typicode.com';
  getData = (ev)=>{
        this.setState({loaded:false,error: null});
        let url = this.baseURL + '/photos';
        let h = new Headers();
        h.append('Authorization','Bearer sjdkfhakdkakhkajsdhks');
        h.append('X-Client','Steve and Friends');

        let req = new Request(url,{
            headers: h,method: 'GET'
        });

        fetch(req)
        .then(response=>response.json())
        .then(this.showData)
    }

getData 并在 componentDidMount 中调用

问题是当按钮(点击其他功能)被点击时,它永远不会工作,直到 getData 完成。 如何在不等待 api 调用完成的情况下使按钮工作?

ios没有出现过这个问题,只有android出现过。

The complete snippet code link

解决方法

一个不是简单地创建 5000 次观看而没有任何滞后。

我的建议是使用 FlatList 而不是 ScrollView。

                <FlatList data={this.state.data} renderItem={({item,index})=>{
                   return ( <Text key={item.id} style={styles.txt}>
                        {item}
                    </Text>)
                }
                }/>

这就是方法。