Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. React Native
Code

React Native App 常用布局: 相册页面

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Common React Native App Layouts.
Common React Native App Layouts: Calendar Page
Common React Native App Layouts: News Feed

Chinese (Simplified) (中文(简体)) translation by Shen Yun Court (you can also view the original English article)

在这个序列, 你将学习如何使用React Native 来创建在手机APP 中常用的页面布局. 你在这里将要创建的布局并不是通用的, 相反, 我们将主要关注于怎么在React Native APP 里面对内容进行布局.

如果你还不知道该怎么进行布局, 那么最好看看前面的文章.

要跟随本系列, 我建议你在学习教程里面的每一步之前, 应当先亲自去创建每一个界面. 如果你只是看看, 你可能并不能获益多少! 在你查看答案之前, 先进行尝试. 如果你成功实现了类似的界面, 比较一下你的实现方式和我的. 看看哪一个实现比较好!

在这个系列的第三篇, 你将创建如下的相册页面:

photo gallery page

相册常常用来显示一组相关的内容, 通过只展示其必要信息的方式. 通常情况下, 它包含了一个图片, 一个标题, 以及其他相关的信息.

在这里有一些实际使用这种布局方式的例子:

Crunchyroll Anime Gallery
Librivox Audiobook Gallery

项目初始化

第一步, 当然就是初始化一个新的React Native 项目:

当项目完成初始化, 打开index.android.js 文件, 并用下面的代码进行替换:

创建src/pages 目录, 并在里面创建Gallery.js 文件.

你还需要react-native-vector-icons 包, 用来做底部的图标.

打开android/app/build.gradle 文件并添加依赖:

编辑android/settings.gradle, 并添加下面内容:

打开android/app/src/main/java/com/react-native-common-screens/MainApplication.java 并导入包:

最后, 进行初始化:

创建相册页面

OK, 现在你可以尝试自己去实现一下了(不要欺骗, OK?). 下面是我的实现方法.

不像之前的两个页面, 相册页面需要一些图片来作为其内容. 你可以去Google 查找图片, 或者从这个Github 库里面去下载图片. 我所使用的所有图片, 都是被他们的所有者标记为可以自由使用的, 所以你也可以拿来用. 当你下载了图片, 把它们保存到src/images 文件夹. 鉴于这些图片的布局方式, 在这里, 它们的尺寸是相同的.

创建(src/pages/Gallery.js) 文件并添加下面代码:

这个页面需要constructor() 方法来定义要使用的图片所在的路径. 在React Native, 引用工作目录下的图片的方式, 就是直接require 它们, 就像引用JavaScript 模块一样. 需要注意的是, 你不能动态生成图片的路径, 所以你只能一个个手动去添加.

不是一定要在state 中定义它们, 因为它们的值并不会改变. 你也可以在另外的文件定义它们, 然后导入进来作为一个变量进行使用. 但是为了简单, 我决定直接将所有的东西都放在state 里面去.

render() 方法里面, 你将打破将所有内容都放在ScrollView 组件的常用做法, 因为在屏幕最底部的tab 组件是固定不变的. 也就是说, 即使图片已经滚动到一定的高度了, tab 还是呆着底部. 要实现这个效果, 使用一个View 来放置所有的内容, 然后将图片放在ScrollView 里面. 这样就可以允许你只滚动图片了:

在这里你可以看到一个常见的模式. 每次你想在render() 方法使用JavaScript 代码的时候, 你都应该创建一个单独的方法, 而不是直接把所有代码都放在render() 方法里面. 这可以让它保持简洁精炼.

现在让我们来设置页面的样式. 虽然ScrollView 这次并没有包含所有的内容, 但是还是要提醒的是, 你还是需要给主容器添加flex: 1 的样式, 使得它可以占据尽可能多的空间.

renderGallery() 和上一篇中我们用来渲染日历页面的renderWeeks() 很像. 如果你需要重新温习一下它是怎么工作的, 可以回到前一篇的日历页面看看. 在这里需要指出的是, Image 需要设置resizeMode 属性的值为 cover, 这样才可以使得图片占据容器中全部可用的空间, 同时还保留其宽高比. 当在大屏幕上显示比较小的图片的时候, 这样设置就可以使得图片拉伸到设备的大小.

下面是getPairsArray() 方法:

gallery page styled footer

最后, 需要给每一行(item) 和图片(photo) 设置样式. 注意, 需要给图片设置flex: 1. 因为Image 组件本身就是它自己的容器. 如果你想要这容器占据每一行的一半, 那么就需要设置flex 属性. 如果没有这样做, 图片将只使用它本身的大小, 即使你之前添加了resizeMode 也是没有效果的.

总结

就这样! 在这个教程里面你学到了怎么对一个相册页面进行布局. 我们学习了怎么在React Native APP 中对图片进行布局. 为了让图片用你想要的方式进行布局, 你常常需要将flexresizeMode 结合着一起使用. 将我的方案和你的比较看看, 结果如何呢? 请在下面的讨论里回复, 让我们知道.

在接下来的一片教程, 我们将学习怎么实现在新闻APP 里面常用的布局. 最后, 可以看看我们其他的React Native 和Flexbox 的教程!

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.