React Native用fetch获取Json数据的问题

最新推荐文章于 2025-11-14 04:45:16 发布

原创

最新推荐文章于 2025-11-14 04:45:16 发布 · 6.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#json #native

本文介绍了在React Native中如何使用fetch获取Json数据，并在组件渲染时遇到的问题及解决方案。通过在生命周期函数componentDidMount中调用fetch，然后将数据设置到state，以解决初次渲染时数据未加载完成的问题。文章还提供了React Native组件生命周期的学习资源链接。

前面的文章React Native利用ScrollableTabView实现Tab+ViewPager效果里面的item内容都是写死的，这篇文章将其改进一下，改成从服务端获取Json数据并在FlatList里显示出来。

由于是简单的实现一下，就采用官方提供的例子里面的url(https://facebook.github.io/react-native/movies.json)

{
  "title": "The Basics - Networking",
  "description": "Your app fetched this from a remote endpoint!",
  "movies": [
    { "title": "Star Wars", "releaseYear": "1977"},
    { "title": "Back to the Future", "releaseYear": "1985"},
    { "title": "The Matrix", "releaseYear": "1999"