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

先修改一个地方 .. 打开 index.ios.js ..

把应用默认打开的页面设置成 featured ... 再保存一下 .. 现在你会看到，模拟器上默认会打开推荐电影这个页面 .. 现在这里显示的数据来源是豆瓣的 API 提供的 .. 我们需要把它替换成 Drupal 的 REST API ...

这个推荐电影里面用的是 Featured 组件 .. 打开 Featured.js ... 在这个组件里面，设置了默认的路由要打开的组件，这里就是 MovieList .. 再打开 app 目录下的 MovieList.js ..

在这个组件里，我们使用了豆瓣的 API ，使用 fetch 这个方法请求回来一些电影内容，把这些内容作为数据源交给了 React Naitve 的 ListView 组件去使用。如果你还不了解具体怎么做，可以参考宁皓网关于 React Native 的课程。

在介绍 Drupal 8 的 REST API 的时候，我们创建了一个 REST 视图 .. 地址是 api/movie .. 先看一下，使用 POSTMAN 请求一下这个地址 .. 先是网站的基本地址 .. 加上一个 /api/movie ...

它会给我们返回来一些数据 ... 这些数据里面只有一个属性 .. 就是这个 title .. 在后面我们会再去编辑一下这个视图，让它输出更多的内容 ...

回到编辑器 .. 这里的 this.REQUEST_URL 就是在组件里面要请求的地址，现在用的是豆瓣的 api .. 我们把它替换成 Drupal 的 REST API .. 地址是 Drupal 网站的基本地址 .. 加上 /api/movie ..

再找到 requestURL ，这个方法可以返回需要请求的地址，因为要请求的地址里面可能会包含一些参数 .. 使用这样的一个方法会更方便一些 .. 先去掉这里的 count 还有 start 参数 .. 这些是专门针对豆瓣的 API 添加的东西 .. 主要的功能就是去处理分页内容 ..

方法返回的东西，先只留下这个 url ..

再浏览到 fetchData 这个方法，它的功能主要就是获取到一些初始的数据，也就是先要去请求一下我们提供的 API 的地址，把得到的内容交给 ListView ..

去掉这个 newStart 变量 .. 下面设置的是组件的状态 .. 只留下这个 movies 状态，还有 loaded 状态 .. total 还有 start 这两个状态都是针对豆瓣的 api 设计的 ..

再修改一下要交给 movies 状态的值，去掉后面的 .subjects ，因为我们请求回来的数据直接就是电影内容，并没有在这个 subjects 属性里面 ... 这里只用一个 responseData ..

显示每个数据源，用的是 renderMovieList 这个方法 .. 每一个显示的列表项目用的是 movie 来表示的 .. 现在我们要显示的是电影的海报 ... 电影的标题 .. 原始的名字 .. 年代 .. 还有评分 ..

不过现在，在我们的 drupal rest api 里面，每个项目里面只有一个标题属性 .. 名字就是 title ，所以，暂时我们只能显示出这个属性里的东西 ...

先注释掉其它的东西 .. 电影的海报 .. 电影的原始名 .. 电影的年代 .. 还有这个平均分 .. 只留下这个 movie.title ..

保存一下 .. 启用了项目的实时预览功能以后，文件有变化的时候，会自动刷新应用的显示 .. 现在你会看到，在这个推荐电影页面上，会显示一些电影的标题 ... 这些数据就是我们的 Drupal 提供的。

统计