08 2017 档案
摘要:1.搜索模块 GDSearch.js 监听 键盘函数 效果图: 2.设置模块 GDSettings.js GDSettingsCell.js 效果图: .
阅读全文
摘要:1.小时风云榜 GDHourList.js 效果图: 2.对当前时间的处理 3.按照官方数据实现 提示栏、上一小时、下一小时 的功能 GDHourList.js 效果图: .
阅读全文
摘要:1.数据持久化 数据持久化是移动端的一个重要部分,刚发现 Realm 原来已经支持 React-Native 了 步骤一: 引入 realm 步骤二: 添加 Realm 与 工程的链接 react-native >= 0.31.0 react-native < 0.31.0 首先,在为了方便使用,也
阅读全文
摘要:1.海淘半小时热门 基本功能和首页相似 GDHt.js GDUSHalfHourHot.js 效果图: 2.获取最新数据个数功能 (角标) GDHome.js GDMain.js 核心代码: 这里需要 cnmaxid 和 usmaxid 参数,他们分别是最新数据中第一个元素的 id,也就是我们每次
阅读全文
摘要:1.加载更多功能完善 GDHome.js 核心代码: 2.详情页 (1)Cell 点击实现 我们回到主页这边来实现以下 cell 的点击,需要注意的是对 row 进行绑定操作,不然会找不到当前的 this。 接着来看下 renderRow 方法实现: 再来看下 pushToDetail 方法实现,p
阅读全文
摘要:1.Android启动页面 思路:新建一个组件作为 Android 的启动页,index.android.js 的初始化窗口改为 Android启动页,设置定时器,使其在1.5秒后自动跳转到 Main 组件。 GDLaunchPage.js index.android.js 调用 效果图 2.模态方
阅读全文
摘要:1.POST 2.合并后 HTTPBase.js 3.调用 GDHome.js GDHalfHourHot.js .
阅读全文
摘要:1.到这里,相信各位对 React-Native 有所熟悉了吧,从现在开始我们要慢慢往实际的方向走,这边就先从网络请求这部分开始,在正式开发中,网络请求一般都单独作为一部分,我们在需要使用的地方只需要简单调用一下即可,这样做的好处是让整个 工程 的结构更加清晰,让组件们各司其职,只管好自己该管的事,
阅读全文
摘要:1.下拉刷新 使用第三方插件 下载插件: 引入: 将 ListView 改为 PullList 即可 GDHalfHourHot.js 效果图: 2.POST 带参数请求 3.navigator 跳转动画 关闭 Navigator 返回手势 有时候我们需要在跳转的时候使用不同的跳转动画,比如我们 半
阅读全文
摘要:1.还是网络问题,在网络出现问题或者无法加载数据的时候,一般我们会展示空白页,在空白页中提示 无数据 之类的提示,比较好的还会使用 指示器 的方式告诉用户网络出现问题等等。 这边我们做以下处理,当无数据时,我们就先初始化基础界面,然后展示 提示页面,等到有数据时,再重新渲染数据。 步骤一:首先设置
阅读全文
摘要:1.在 React-Native 创建的自定义组件是可以复用的,而开发过程中一个组件可能会由多个人同时开发或者多个人使用一个组件,为了让开发人员之间减少沟通成本,我们会对某些必要的属性进行属性声明,让使用的人知道需要传入什么!甚至有些需要传入但没有传入值的属性我们会进行警告处理! 属性声明 的示例:
阅读全文
摘要:1.GDHalfHourHot.js 发送通知 核心代码: 2.GDMain.js 接收通知 判断 tabBar 是否隐藏 核心代码: 效果图:
阅读全文
摘要:1.设置页面跳转 半小时热门组件 GDHalfHourHot.js 首页调用 GDHome.js 效果图: 2.先从 半小时热门 开始,像这样的数据展示,我们肯定是优先选择 ListView ,其中,cell 的样式分解如下: GDCommunalHotCell.js 在 GDHalfHourHot
阅读全文
摘要:1.自定义导航栏样式 步骤一:从效果图中可以看出,导航栏的样式都差不多,因为我们前面已经设置了 Navigator ,这边的话我们还需要自定义 Navigator 的样式,可以看到所有的 Navigator 样式都是相近的,所以这边我们就抽出来,让所有的 Navigator 共用一个组件就可以了。
阅读全文
摘要:1.APP效果图 2.工程环境配置 IOS: 将压缩包内的 Images.xcassets 文件夹直接替换掉我们iOS工程中的 Images.xcassets 文件夹。 这时候我们可以看到所有图片资源已经成功导入到iOS工程中,接着我们点击工程文件进行一些必要的配置。 General —— App
阅读全文
摘要:逻辑分析: 首页(Home)加载的购物中心组件(ShopCenter),传递url数据; ShopCenter里根据url加载购物中心详细页组件(ShopCenterDetail), ShopCenterDetail中利用WebView展示。 1.Home.js 2.ShopCenter.js 3.
阅读全文
摘要:1.公共的标题栏组件TitleCommonCell.js 2.ShopCenter.js 3.Home.js里使用ShopCenter组件 4.用到的json数据 5.效果图
阅读全文
摘要:1.MiddleBottomView.js 2.用到的json数据 3.Home.js 引入 MiddleBottom 4.效果图
阅读全文
摘要:1.HomeMiddleView.js 2.MiddleCommonView.js 3.用到的json 4.Home.js 引入 HomeMiddleView 4.效果图
阅读全文
摘要:1.HomeTopView为首页头部内容,HomeTopListView为HomeTopView子视图。 2.HomeTopView.js 3.HomeTopListView.js 4.Home.js 引入 HomeTopView 组件 5.json数据 6.效果图
阅读全文
摘要:1.创建MineHeaderView.js 2.Mine.js使用这个组件 3.效果图
阅读全文
摘要:1.新建一个MineMiddleView.js,专门用于构建中间的内容 2.Mine.js里使用该组件 3.效果图 4.MiddleData.json .
阅读全文
摘要:1.新建组件CommonMyCell.js 2.Mine.js里如何使用? 3.效果图
阅读全文
摘要:1.自定义可复用的cell More/CommonCell.js: 2.在More.js里使用cell: 3.效果图
阅读全文
摘要:1.More/More.js 2.效果图
阅读全文
摘要:1.Main 目录下新建LaunchImage.js: 2.修改index.android.js: .
阅读全文
摘要:1.Home.js 2.效果图
阅读全文
摘要:1.Main.js 简化代码 2.Home.js 3.Message.js 4.Find.js 5.Mine.js 6.效果图
阅读全文
摘要:1.在Home目录下新建首页详细页HomeDetail.js 2.从Home.js跳转到HomeDetail.js,修改Home.js: 3.在Main.js给首页的tab设置Navigator 4.效果图
阅读全文
摘要:1.安装插件,cd到项目根目录下执行: 2.主框架文件Main.js 3.预览效果
阅读全文
摘要:1.创建项目 2.导入图片资源 安卓:把文件夹放到/android/app/src/main/res/目录下,如图: iOS: Xcode打开工程,把图片拖动到Images.xcassets里 3.根据实际需求,组织项目结构,目的是更加清晰 4.Main.js 5.index.android.js
阅读全文
摘要:http://c.3g.163.com/nc/article/BUH64L0J00031H2L/full.html 观察这个地址,BUH64L0J00031H2L 就是每条新闻数据里的postid。 下面我们要取出里面的 html代码,然后拼接。 1.NewsDetail.js全部代码: 2.Hom
阅读全文
摘要:1.因为需要定时器,所以我们要cd到当前项目根目录下安装这个类库: 2.Component/ScrollImage.js 3.Home.js 4.效果图
阅读全文
摘要:1.Home.js: 2.效果图
阅读全文