用react native 做的一个推酷client

仅供大家參考。仅仅为抛砖引玉。希望大家能以此来了解react。并编写出很多其它的优质的开源库,为程序猿做出贡献。

用的的组件:

  • NavigatorIOS
  • react-native-swiper
  • ListView
  • WebView

执行步骤

  1、npm install
2、用Xcode打开tuiku.xcodeproj
3、Commmand + R

界面是模仿官网的应用的。一个导航,导航以下是分类,分类以下是列表,分类能够点击切换。也能够左右滑动切换,一直往下来,会载入下一页数据。点击某一项,会进到详情页。详情页直接用一个WebView来显示,功能比較简单,共大家学习。下拉刷新也有一个开源控件,可是为了程序的简单我就没加上。

以下是效果

列表

详情

代码已上传github,点击react-native-tuiku查看

用react native 做的一个推酷client的更多相关文章

  1. NodeJS笔记(五) 使用React Native 创建第一个 Android APP

    参考:原文地址 几个月前官方推出了快速创建工具包,由于对React Native不熟悉这里直接使用这2个工具包进行创建 1. create-react-native-app(下文简称CRNA): 2. ...

  2. 如何在 React Native 中写一个自定义模块

    https://my.oschina.net/jpushtech/blog/983230

  3. React Native布局实践:开发京东client首页(三)——轮播图的实现

    上篇文章中,我们一起构建了京东client的TabBar.在本文中.将继续向大家介绍京东client首页轮播图及其下发功能button的开发方法,如今就让我们開始吧! 1.相关控件调研 眼下在Gith ...

  4. React Native技术做的一个项目“微笑阅读”

    最近用React Native做了一个APP应用,有点心得: React Native确实比Hybrid应用渲染快,响应快,用户体验更好: React Native比原生简单多了,会Js就可以了,开发 ...

  5. 利用react native创建一个天气APP

    我们将构建一个实列程序:天气App,(你可以在react native 中创建一个天气应用项目),我们将学习使用并结合可定义模板(stylesheets).盒式布局(flexbox).网络通信.用户输 ...

  6. Hybrid App 和 React Native 开发那点事

    简介:Hybrid App(混合模式移动应用)开发是指介于Web-app.Native-App这两者之间的一种开发模式,兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开 ...

  7. 基于React Native的58 APP开发实践

    React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...

  8. react native 刷新机制----通知

    在项目中,不知道大家有没有遇到这样的一个问题,比如说有两个页面A,B.A页面中有某个按钮点击后可以跳转到B页面,现在有一个需求就是,我在B页面中做了某些操作,然后点击回退按钮,回到A页面,A页面中的数 ...

  9. React Native 项目运行在 Web 浏览器上面

    React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...

随机推荐

  1. swift语言点评十二-Subscripts

    Classes, structures, and enumerations can define subscripts, which are shortcuts for accessing the m ...

  2. 利用php的GD库生成验证码

    <?php ,); //创建一个100宽30高的底图,默认黑色 ,,); //修改颜色.数字对应 rgb 的三个数值.白色 imagefill(,,$bgcolor); //从左上角到右下角把颜 ...

  3. (WC2016模拟十一)【BZOJ4695】最假女选手

    ps:好久没更博啦……这几天连着有模拟赛,等初赛前后休息的时候来疯狂补坑吧……顺便补一下前面的数论啥的? 题解: mdzz我场上写了个15分暴力长度跟标算差不多... 线段树大法好啊!这题听说很多人做 ...

  4. 解决new Date的值为Invalid Date、NaN-NaN的问题

    错误代码: let timespan = 1515239514230; let dateTime = new Date(timespan); console.log(dateTime) // 返回 I ...

  5. python 正则表达式与re模块

    一.正则表达式 用途 用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑. #### 简单地说 就是用于字符串匹配的 字符组 在 ...

  6. bytes、str与unicode

    1.Python3字符序列的类型 bytes -> 原始的8位值(既字节) str -> Unicode字符 2.Python2字符序列的类型 str -> 原始的8位值(既字节) ...

  7. 设计模式-策略模式(Go语言描写叙述)

    好久没有更新博客了.近期也是在忙着充电,今天这篇博客開始,我们来了解一下设计模式. 设计模式 那什么是设计模式呢?首先来看看我从百科上copy下来的概念吧. 设计模式/软件设计模式(Design pa ...

  8. sass06 mixin

    scss @mixin cont{ //mixin是关键字 color:red; } body{ @include cont; //使用默认值 } @mixin cont($color: red ){ ...

  9. 可以通过shadowserver来查看开放的mdns(用以反射放大攻击)——中国的在 https://mdns.shadowserver.org/workstation/index.html

    Open mDNS Scanning Project 来自:https://mdns.shadowserver.org/ If you are looking at this page, then m ...

  10. win10安装jdk8 配置环境变量

    参考:https://jingyan.baidu.com/article/6b97984dd257b41ca2b0bf86.html