『技术分享』—— 我的第一个 RN 项目-趣闻

  |     |   本文总阅读量:

前言

之前利用自己的业余时间入门了微信小程序,并写了一个入门项目 我的第一个微信小程序-趣闻 ,整体效果和之前写的 kotlin-android 版的 趣闻 模块和功能上没有什么区别。不得不说,相比较 Android ,小程序开发起来真的是很舒服,完善的 API和封装全面的组件,安装官方详细的开发文档,很快就可以开发出一款简单便捷的应用。

我们都知道,微信小程序的开发运用的大部分是前端的知识,那 react-native 开发同样如此,既然这样就顺带学习一下 RN,也为后面的跨平台开发做下铺垫。其实 RN 从 15 年到现在发展的也是蛮成熟的,也有了自己完善的控件,活跃的社区也开源了很多美观的组件、项目和 API,因此开发起来也是相当的顺手,当然也避免不了很多的坑,后面会进行介绍。

项目预览

IOS

IOS预览.gif

Android:

Android预览.gif

扫描体验:

二维码

或者点我

整体功能跟之前小程序和 Android 项目的大差不差,主要包括四大模块:新闻、段子、历史上的今天和小爱同学(图灵机器人)。后面会对每个模块进行大致的介绍。

新闻模块

news

功能: 查看多种类型的实时新闻,其中包括:头条、社会、国内、国际、娱乐、体育、军事、科技、财经和时尚。并支持点击单个新闻查看新闻详情。

段子模块

joker

功能:查看最新的段子数据,支持下拉刷新和上拉加载更多查看往期的段子数据。

历史上的今天模块

today

功能:查看历史上今天发生的事件,并支持点击查看事件的详情。

小爱模块

Robot

功能:和机器人进行简单的对话聊天。

项目知识点

这个项目属于入门难度,所以我整个学习到开发差不多5天的时间。开发过程中会遇到一些难点或者坑,这里记录下来,方便自己后面查看,或许也可以帮助到小伙伴。

一些稍微简单的,比如配置环境,创建项目的我就不多说了,自己百度就可以直接查到,后文也会附上相关的链接。

开源组件

RN 原生也提供了很多的组件和接口 官网入口,社区也开源了很多开源组件,这里对那些无私奉献的开发者表示感谢。

我这个项目不复杂,因此用到的框架并不多,后续如果我再添加新的功能可能就需要添加相对应的框架了。

下面是我用到的组件:

image-20180626160944141

reactreact-native 创建项目的时候就下载了。

native-base 比起原生的控件,样式上好看很多,并且提过了其他的控件,比如 CardHead等。

react-native-swiper 有点类似 AndroidViewPager实现轮播效果。

react-navigation 官方推荐的跳转,并且附带了 tab 组件。

具体的使用我就不多做介绍了,进入具体的官网,都会有非常详细的使用教程。

自定义组件

看上面的预览图,你会发现第一次请求网络或者下拉刷新&上拉的时候,会出现一个 Loading 这个就是简单的自定义组件,我接下来简单介绍另一个自定义组件:当请求失败,展示失败页面,并可以点击重试按钮进行重试。因为要把点击重试的事件回调给使用者调用,涉及到 props 的概念,很有代表性,也很常用,所以就介绍他吧。

先看一下效果。

nerPreview

界面搭建: 这个不难。

定义自定义属性:

1
2
3
static propTypes = {
retryClick: PropTypes.func.isRequired
};

声明属性的类型,PropTypes.func 代表这个属性是函数, isRequired 代表这个属性必须添加

属性调用: 在点击重试时调用这个属性,我这里是函数,所以直接执行该函数。

1
2
3
4
5
onPress={() => {
if (this.props.retryClick != null) {
this.props.retryClick()
}
}}

自定义控件使用:

1
2
3
4
5
this.state.netErrorVisible ? (
<NetworkFailureLayout retryClick={() => {
this.getData()
}}/>
) : null

这里通过 netErrorVisible 字段控制网络请求是否成功。

布局

用到最多的就是 flex 布局,涉及到前端的知识不做介绍,本人也是前端小白。推荐学习链接。

Flex 基础篇

Flex 实例篇

快速实现圆角+阴影效果

1
2
3
4
5
6
7
8
9
10
11
shadowColor: '#ccc',
shadowOffset: {width: 2, height: 2,},
shadowOpacity: 0.5,
shadowRadius: 10,
backgroundColor: Color.white,
borderWidth: 0,
borderRadius: 5,
borderColor: 'rgba(0,0,0,0.1)',
padding: Size.public_margin,
elevation: 3,
overflow: 'hidden',

调试

模拟器 cmd + M & 真机摇晃手机调起调试菜单。常用功能:

Reload 重新加载

Debug JS Remotely

调试应用,会打开本地 http://localhost:8081/debugger-ui 调试界面,最好使用 Chrome

Enable Live Reload 实时预览,cmd + s 有文件变化便重新编译。

Android 打包

首先在项目根目录使用终端执行 react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ 命令,会生成 index.android.bundle(这个文件很重要)和相关的资源文件到 android/app 的相关目录下。

其次就是正常的 Android 打包流程了。这里贴出教程链接: Android 打包

总结

整体开发起来,从 环境配置-创建项目-学习相关知识-开发-运行-调试-打包这一套流程走下来,还是蛮顺利的,可能因为项目比较简单的原因吧,当然也遇到了不少的坑,这里做个总结。

学习来源

  1. 中文官网 (不用多少,很详细,全面)
  2. 某宝买的视频(有需要私聊)
  3. 链接网站(文末会贴)

数据来源

聚合数据 没办法,暂时没有能力写接口,每天每个接口有 500 次的请求限制。

采坑心得

  1. unable to connect with remote debugger Timeout while connecting to remote debugger
  • 检查是否连接设备 & 有且仅有一台设备
  • 手机调试模式是否打开
  • 调试服务是否打开
  • 将存在的 apk 卸载重新运行
  • 检查端口是否被占用
  1. 使用 createStackNavigator 创建 bottomBar titleBar 白色

    createStackNavigator配置出添加 headerMode: 'none', 隐藏 titleBar,然后使用 native-base 中的 Head 创建 TitleBar

  2. FlatList 列表使用 navigation 进行跳转,navigation not defined

    FlatList属于自定义组件,如果需要使用 navigation 跳转,需要将 navigation 对象传到每个 item

  3. 运行失败

    image.png

    经常会遇到这种错误,仔细排查日志详情,一般是可以找到问题的。

    image.png

    这里是因为 Text 导了两个包。

相关链接

项目已上传至 GithubQnews_React_Native

中文官网

30 天学 RN

RN 学习指南

控件-awesome-react-native

控件-react-native-elements

控件-native-base

控件-Ant Design

Flex 基础篇

Flex 实例篇

本人也是小白,写的也不是很全面,请见谅。

#rewardButton { background-color: #ea6f5a; } .btn-pay { margin-bottom: 20px; padding: 8px 25px; font-size: 16px; color: #fff; background-color: #ea6f5a; } .btn { display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.42857; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #QR img{ height: 200px; height: 200px; margin: 20px; }
文章目录
  1. 1. 前言
  2. 2. 项目预览
    1. 2.1. 新闻模块
    2. 2.2. 段子模块
    3. 2.3. 历史上的今天模块
    4. 2.4. 小爱模块
  3. 3. 项目知识点
    1. 3.1. 开源组件
    2. 3.2. 自定义组件
    3. 3.3. 布局
    4. 3.4. 调试
    5. 3.5. Android 打包
  4. 4. 总结
    1. 4.1. 学习来源
    2. 4.2. 数据来源
    3. 4.3. 采坑心得
    4. 4.4. 相关链接
您是第 位小伙伴 | 本站总访问量 | 已经写了 120.4k 字啦

载入天数...载入时分秒...