react native实现一个简单的APP

用rn写的一个简单APP,暂时只写了这么多内容,有兴趣可以去我的Github地址下载看一看

demo下载链接

开发工具是webstrom和genymotion,真机也行。这里有一个页面相当于重构了我现在一个项目中的页面,值得借鉴

具体实现了一下几点功能

  1. 浏览页和首页轮播图,都是通过react-native-swiper实现,这也是一个常用的rn轮播控件,里面可以加入本地图片或网络图片地址
  2. 跳转,APP跳转效果虽然一样,但是rn和Android跳转过程完全不一样,我这里rn需要集成navigation(方式如下),这里实现了跳转首页携带参数过程
  3. tab,底部tab和顶部tab(类似今日头条头部)在APP中比较常见,既然安卓和iOS自定义控件比较常见,我相信rn中无论是tab还是轮播或其他控件都可以自定义来实现实际需求
  4. 按钮或列表的吐司,点击事件和点击效果,滑动控件ScrollView用法
  5. 网络请求fetch,我这里拿了我之前一个项目请求后台的数据,请求方式为常见的表单格式
  6. listView,列表的使用方法和之前也不同,我这里利用fetch请求的数据渲染出一个和我之前项目一样的列表

提示:虽然项目内容简单,但是实现过程中会遇见很多坑,一个新的技术也许就是这样,从开始搭建环境到helloworld到入门,总会遇到各种各样头疼的问题,因为问题较多所以我也没有一一列举。我们应该庆幸的是到后来你会遇到很多和开始一样的问题,解决起来就简单得多,遇到问题就要想办法解决,后面的路才会越来越平

react native实现一个简单的APP_第1张图片

下载完之后在你的项目目录下安装,底部tab,轮播,和跳转插件

// 适合作为底部的 tab
npm install react-native-tab-navigator --save

// 适合作为顶部的 tab
npm install react-native-scrollable-tab-view --save
npm install react-native-swiper --save
//集成navigation
yarn add react-navigation
yarn add react-native-gesture-handler
react-native link react-native-gesture-handler

你可能感兴趣的:(React,Native)