我的第一个 RN 项目-趣闻

立即下载用AI写一个

发布时间：2018-06-27

37人 | 浏览：3716次 | 收藏 |

技术：react,javascript

概述

整体效果和之前写的 kotlin-android 版的趣闻模块和功能上没有什么区别。不得不说，相比较 Android ，小程序开发起来真的是很舒服，完善的 API和封装全面的组件，安装官方详细的开发文档，很快就可以开发出一款简单便捷的应用。

详细

## 项目预览

**IOS**：

![IOS预览.gif](/contentImages/image/jianshu/4043475-4621cf3fc4e30a90.gif)

**Android：**

![Android预览.gif](/contentImages/image/jianshu/4043475-a0a80fc22164f94f.gif)

扫描体验：

![二维码](/contentImages/image/jianshu/4043475-9b0da908568e6844.png)

或者[点我](https://pan.baidu.com/s/1hu5wKVFsaqtT9c81oIWOoA)

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

### 新闻模块

![news](/contentImages/image/jianshu/4043475-b0c0495487060fed.gif)

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

### 段子模块

![joker](/contentImages/image/jianshu/4043475-6da5504109e19c82.gif)

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

### 历史上的今天模块

![today](/contentImages/image/jianshu/4043475-b1b124478c6b7604.gif)

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

### 小爱模块

![Robot](/contentImages/image/jianshu/4043475-8e4c2f4c92e7bab4.gif)

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

## 项目知识点

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

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

### 开源组件

RN 原生也提供了很多的组件和接口 [官网入口](https://reactnative.cn/docs/0.51/getting-started.html)，社区也开源了很多开源组件，这里对那些无私奉献的开发者表示感谢。

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

下面是我用到的组件：

![image-20180626160944141](/contentImages/image/jianshu/4043475-d128db93c71695ee.png)

`react` 和 `react-native` 创建项目的时候就下载了。

[native-base](https://docs.nativebase.io/Components.html#ref-components-headref) 比起原生的控件，样式上好看很多，并且提过了其他的控件，比如 `Card`、 `Head`等。

[react-native-swiper](https://github.com/leecade/react-native-swiper) 有点类似 `Android` 的 `ViewPager`实现轮播效果。

[react-navigation](https://github.com/react-navigation/react-navigation) 官方推荐的跳转，并且附带了 `tab` 组件。

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

### 自定义组件

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

先看一下效果。

![nerPreview](/contentImages/image/jianshu/4043475-6882c8da2e6ecd42.gif)

**界面搭建：** 这个不难。

**定义自定义属性：**

```javascript
    static propTypes = {
        retryClick: PropTypes.func.isRequired
    };
```

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

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

```javascript
onPress={() => {
    if (this.props.retryClick != null) {
    	this.props.retryClick()
	}
}}
```

**自定义控件使用：**

```
this.state.netErrorVisible ? (
    <NetworkFailureLayout retryClick={() => {
    	this.getData()
    }}/>
) : null
```

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

### 布局

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

[Flex 基础篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

[Flex 实例篇](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)

**快速实现圆角+阴影效果**

```css
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 打包](https://www.jianshu.com/p/1380d4c8b596)

### 项目结构截图
>代码项目结构截图与说明如下：

![](/contentImages/image/20180627/DJBVK07sgcbSWAupQw9.jpg)

## 总结

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

### 学习来源

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

### 数据来源

[聚合数据](https://www.juhe.cn/) 没办法，暂时没有能力写接口，每天每个接口有 500 次的请求限制。

### 采坑心得

1.  `unable to connect with remote debugger Timeout while connecting to remote debugger`

- 检查是否连接设备 & 有且仅有一台设备
- 手机调试模式是否打开
- 调试服务是否打开
- 将存在的 `apk` 卸载重新运行
- 检查端口是否被占用

2. 使用 `createStackNavigator` 创建 `bottomBar` `titleBar` 白色

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

3. `FlatList` 列表使用 `navigation` 进行跳转，`navigation not defined`

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

4. 运行失败

![image.png](/contentImages/image/jianshu/4043475-527f897e704d10dc.png)

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

![image.png](/contentImages/image/jianshu/4043475-b78fa07c5b12706c.png)

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

### 相关链接

[中文官网](https://reactnative.cn/)

[30 天学 RN](https://github.com/fangwei716/30-days-of-react-native)

[RN 学习指南](https://github.com/reactnativecn/react-native-guide)

[控件-awesome-react-native](https://github.com/reactnativecn/react-native-guide)

[控件-react-native-elements](https://react-native-training.github.io/react-native-elements/docs/0.19.0/getting_started.html)

[控件-native-base](https://docs.nativebase.io/Components.html#ref-components-headref)

[控件-Ant Design](https://rn.mobile.ant.design/docs/react/introduce-cn)

[Flex 基础篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

[Flex 实例篇](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

我的第一个 RN 项目-趣闻

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子