我的第一个 RN 项目-趣闻

红太狼 2022-05-11 01:48 129阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/13486.html][http_www.demodashi.com_demo_13486.html]

## 项目预览 ##

**IOS**：

![IOS预览.gif][IOS_.gif]

**Android：**

![Android预览.gif][Android_.gif]

扫描体验：

![二维码][1240]

或者[点我][Link 1]

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

### 新闻模块 ###

![news][]

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

### 段子模块 ###

![joker][]

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

### 历史上的今天模块 ###

![today][]

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

### 小爱模块 ###

![Robot][]

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

## 项目知识点 ##

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

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

### 开源组件 ###

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

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

下面是我用到的组件：

![image-20180626160944141][]

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

[native-base][] 比起原生的控件，样式上好看很多，并且提过了其他的控件，比如 `Card`、 `Head`等。

[react-native-swiper][] 有点类似 `Android` 的 `ViewPager`实现轮播效果。

[react-navigation][] 官方推荐的跳转，并且附带了 `tab` 组件。

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

### 自定义组件 ###

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

先看一下效果。

![nerPreview][]

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

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

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

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

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

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

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

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

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

### 布局 ###

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

[Flex 基础篇][Flex]

[Flex 实例篇][Flex 1]

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

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 打包][Android]

### 项目结构截图 ###

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

![DJBVK07sgcbSWAupQw9.jpg][]

## 总结 ##

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

### 学习来源 ###

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

### 数据来源 ###

[聚合数据][Link 4] 没办法，暂时没有能力写接口，每天每个接口有 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][image.png 1]
    
    这里是因为 `Text` 导了两个包。

### 相关链接 ###

[中文官网][Link 3]

[30 天学 RN][30 _ RN]

[RN 学习指南][RN]

[控件-awesome-react-native][RN]

[控件-react-native-elements][-react-native-elements]

[控件-native-base][native-base]

[控件-Ant Design][-Ant Design]

[Flex 基础篇][Flex]

[Flex 实例篇][Flex 1]

我的第一个 RN 项目-趣闻

> 代码地址如下：  
> [http://www.demodashi.com/demo/13486.html][http_www.demodashi.com_demo_13486.html]

> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_13486.html]: http://www.demodashi.com/demo/13486.html
[IOS_.gif]: /images/20220511/02351561fe794df3864afd3c7a9ec0fe.png
[Android_.gif]: /images/20220511/2d5ca5bae531497f89d110ca88918f85.png
[1240]: /images/20220511/80d7b80b9ddd4acaa869b4a03fdb64a6.png
[Link 1]: https://pan.baidu.com/s/1hu5wKVFsaqtT9c81oIWOoA
[news]: /images/20220511/2d68e3b1cf14461799a890ac77db4729.png
[joker]: /images/20220511/5ffec92dbbcf4c33a6b80a2033f976ed.png
[today]: /images/20220511/b07ac90b9cbf40b4bf890ef3c2c626fd.png
[Robot]: /images/20220511/c5632378227449f38d036ce50d322cfd.png
[Link 2]: https://reactnative.cn/docs/0.51/getting-started.html
[image-20180626160944141]: /images/20220511/3c20a37cb4e0475eb5c0fe3cd76e26f8.png
[native-base]: https://docs.nativebase.io/Components.html#ref-components-headref
[react-native-swiper]: https://github.com/leecade/react-native-swiper
[react-navigation]: https://github.com/react-navigation/react-navigation
[nerPreview]: /images/20220511/fb99a9e5ea3d40798a5d308d620d268b.png
[Flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[Flex 1]: http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
[Android]: https://www.jianshu.com/p/1380d4c8b596
[DJBVK07sgcbSWAupQw9.jpg]: /images/20220511/ef89a9b5689747509c585c3cf02e7f96.png
[Link 3]: https://reactnative.cn/
[Link 4]: https://www.juhe.cn/
[image.png]: /images/20220511/06d33fc0119542bc9eed4d1c8b8da057.png
[image.png 1]: /images/20220511/ff59038b92204e97806c0990e93cb4c7.png
[30 _ RN]: https://github.com/fangwei716/30-days-of-react-native
[RN]: 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
[-Ant Design]: https://rn.mobile.ant.design/docs/react/introduce-cn