如何解决 on press 的冻结，直到另一个 fetch api 在 react native 中完成

Question

在 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

Answer 1

一个人不会毫无延迟地创建 5000 个视图。

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

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

就是这样。

如何解决 on press 的冻结，直到另一个 fetch api 在 react native 中完成

How to solve freeze of on press until another fetch api finishs in react native

reactjs

react-native

api

onpress