问题描述
在 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>)
}
}/>
这就是方法。