为 ListView 组件提供数据源

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

先把应用默认打开的页面换成这个推荐电影 .. 打开 index.ios.js .. 把这个 selectedTab 状态的默认的值修改成 featured .. 再保存一下 ..

在这个推荐电影页面上,默认显示的数据都是来自豆瓣的 API,也就是我们的应用会向豆瓣去请求需要的数据,再把请求回来的数据交给了 React Native 的 ListView 这个组件去显示。

下面我们要做的就是使用 WordPress 作为后端服务,为 ListView 组件提供需要的数据。

打开 app/Components ... MovieList.js .. 这个文件里定义的组件就是你看到的这个推荐电影页面上的显示 .. this.REQUEST_URL 的值是豆瓣的 API .. 我们给它换成 WordPress 的 REST API ..

地址是网站的基本的地址 .. 加上 wp-json/wp/v2/posts .. 这是 WP REST API 插件提供的一个接口地址 .. 使用 GET 方法请求它可以返回文章内容的列表 ..

下面的 fetchData 这个方法会去请求这个地址 .. 这个地址是用上面的 requestUrl 这个方法返回来的 .. 去掉这个方法里的 count 还有 start 这两个参数 .. 它们是针对豆瓣 api 设计的 ..

再去掉返回的地址里的 count 还有 start 参数 ..

这个 fetchData 里的 fetch 方法得到数据以后,会把这些数据交给组件的 movies 这个状态 .. 现在设置的是 responseData.subjects ,因为豆瓣的 API 里面,返回来的具体的电影内容会在 subjects 这个属性里面。

我们的 WordPress 提供的接口不需要这个 subjects 属性,先去掉它 .. 再去掉 total 还有 start 这两个状态 .. 这都是豆瓣 API 上特有的东西。 再去掉上面的 newStart 这个变量 ..

找到 renderMovieList 这个方法 .. 它是 ListView 组件指定的处理每个项目的显示用的方法 .. 在它里面,之前我们用到了电影的海报,标题,原名,年代,还有平均分 ...

现在我们的 WordPress REST 接口只提供电影的标题 .. 其它的东西在以后再想办法得到 .. 先注释掉除了电影标题以外的要显示的东西 ...

保存一下 .. 现在,在这个推荐电影页面上,会显示来自 WordPress 的电影列表,每个项目上只有一个电影的标题 .. 再打开 WordPress 的管理后台 .. 文章 .. 在应用的推荐电影上面显示的电影列表内容, 就是你在这里看到的这些文章 ...

为 ListView 组件提供数据源《 WordPress 与 React Native 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点