![](https://img-blog.csdnimg.cn/20190301222536395.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
React-native
我的React-native学习笔记
天空之蓝钻
这个作者很懒,什么都没留下…
展开
-
自学React-native (第十一天)-- Android安装包打包流程
1.设置android/gradle.propertiesMYAPP_RELEASE_KEY_ALIAS=android_keystoreMYAPP_RELEASE_KEY_PASSWORD=123456MYAPP_RELEASE_STORE_PASSWORD=123456MYAPP_RELEASE_STORE_FILE=android_keystore.jksandroid.useDe...原创 2019-03-16 22:12:59 · 251 阅读 · 0 评论 -
自学React-native (第十天)--使用FlatList实现下拉刷新和下拉加载更多
1. 前言:终于要开始编写业务代码了,今天将组合前面9天学习的内容来制作一个「最热」功能.2.代码View层page/PopularTab.jsimport React, { Component } from "react";import { FlatList, View, Text, StyleSheet, Button, RefreshControl, ActivityIndica...原创 2019-03-07 17:37:43 · 1105 阅读 · 0 评论 -
自学React-native (第九天)-- 网络编程以及离线缓存框架实现
1.前言:react-native 提供了全局的fetch函数作为替代xhr的网络通讯模块。之所以这么选择是由于xhr存在以下的缺点:1.设计上不符合责任分离原则,将输入、输出和用事件来跟踪的状态混杂在一个对象里。2.与最近的promise以及基于生成器的异步编程模型不太搭。需要注意的是,fetch规范与jquery.ajax主要有两种方式的不同:当接收到一个代表错误的HTTP状态...原创 2019-03-05 17:38:49 · 601 阅读 · 0 评论 -
自学React-native (第八天)-- redux使用
1. 前言:react的状态管理首选Redux,Redux是javascript状态容器,提供可预测话的状态管理,可以让你构建异质化的应用,运行于不同的环境(客户端、服务器、原声应用),并且易于测试。React-redux的流程简图如下:2.开始安装模块npm install --save reduxnpm install --save react-reduxnpm instal...原创 2019-03-03 19:52:58 · 582 阅读 · 1 评论 -
自学React-native (第七天)-- 导航嵌套
自学React-native (第七天)-- 导航嵌套1. 前言这里介绍遇到的一些问题。2.用什么方式来嵌套?当你在一个导航容器中包含另一个导航容器的时候会有提示:在项目中嵌套navigtor(导航器)是很普遍的情况,这个时候如何处理各个页面间的跳转将是个很令人头疼的问题,接下来我会给出几种处理方案。createAppContainer包裹:...原创 2019-03-01 00:16:35 · 1282 阅读 · 1 评论 -
自学React-native (第六天)-- 需求分析
自学React-native (第六天)-- 需求分析1.前言对于我们程序员来说,任何项目的第一步不是编码而是需求分析,作为一切的开头可以说需求分析很大程度决定了一个项目的整体框架,好的需求分析对加速开发减少返工增进各部门协调都有很大的意义。2.需求分析需求整理:开发这款app的初衷是来自于阅读github-trending的需求,github的这个趋势服务帮助我们找到全球githu...原创 2019-02-26 11:55:08 · 285 阅读 · 0 评论 -
自学React-native (第五天)-- SectionList 学习
自学React-native (第五天)-- SectionList 学习1.前言SectionList组件使用方式和FlatList十分相似,不同点仅仅是实现了分组的功能:如上图所示,城市名处于不同的分组中,分组栏的标题在上滑到顶端时将会粘附在顶端直到下一个标题被划到顶部为止。2. 代码阅读/** * Sample React Native App * https://githu...原创 2019-02-25 23:27:38 · 184 阅读 · 0 评论 -
自学React-native (第五天)-- MAC环境搭建
自学React-native (第五天)-- IOS环境搭建1. 前言这几天学习react-native深深觉得Mac环境是必要的,比如切换查看ios平台效果,Xcode的模拟器的方便,教程基本是使用iOS 做开发环境等等等等。所以笔者这两天搭了个黑苹果的环境(没办法穷买不起垃圾桶)终于可以高效且方便的进行RN开发了。有人可能问我为什么不用虚拟机,别人我不知道是什么情况,我8700k+gt...原创 2019-02-25 21:51:41 · 349 阅读 · 0 评论 -
自学React-native (第五天)-- FlatList
自学React-native (第四天)-- FlatList1.前言FlatList是facebook公司用来替代ViewList控件的新组件。为什么选择FlatList呢?因为相比ViewList的全渲染机制,FlatList更省资源,卡顿和OOD的几率小。具体执行上的机制是类似走马灯,处于屏幕外的item部分不会全部显示而会由白屏取代以节省资源,所以FlatList有个问题就是组件本身...原创 2019-02-23 23:53:19 · 618 阅读 · 0 评论 -
自学React-native (第四天)-- BottomTabNavigator 和 MaterialBottomTabNavigator、DrawerNavigator导航
自学React-native (第三天)-- BottomTabNavigator导航1.前言:由于使用了下边栏图标,所以安装了react-native-vector-icons,由于rnvi组件带有自己的ios/android代码所以需要使用命令:react-native link react-native-vector-icons将原生资源引入到本地项目中。影响到的地方:android...原创 2019-02-22 21:13:06 · 432 阅读 · 0 评论 -
自学React-native (第三天)-- StackNavigator导航
自学React-native (第三天)-- StackNavigator导航(1)1.前言:对您有帮助的话请点个赞哈~~。博主拜谢stackNavigator是一个简单的Navigator(导航器),顾名思义基本概念是采用stack(堆栈)管理路由的方式。stackNavigator没有上下导航栏,仅支持跳转导航类似于web中的超链接。2.使用方式:在index.js中我们这样引...原创 2019-02-22 15:22:51 · 406 阅读 · 0 评论 -
自学React-native (第二天)-- 布局
自学React-native (第二天)-- 布局1.前言:RN中布局使用的是flex(弹性布局方式)。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所...原创 2019-02-21 23:35:24 · 487 阅读 · 0 评论 -
自学React-native -- 自定义组件NavigationBar(第一天)
自学React-native – 自定义组件NavigationBar(第一天)1.rn的开发环境配置配置React Native的开发环境2.控件源码:1.NavigatorBar的代码:import React, { Component } from "react";import PropTypes from "prop-types&amp原创 2019-02-19 15:33:32 · 467 阅读 · 0 评论