react-native学习笔记
关注
分享
扫一扫
沿着路走到底
涉及前端，后端，数据库
展开
-
创建React-Native应用
创建React应用npm install -g create-react-appcreact-react-app my-appcd my-appnpm start安装React Native命令行工具npm install -g react-native-clidevelopers.google.cn 下载android studiohttps://developer.an...原创 2019-05-08 10:06:05 · 126 阅读 · 0 评论 -
RN数据库编程之AsyncStorage精讲
数据存储是开发APP必不可少的一部分，比如页面缓存，从网络上获取数据的本地持久化等，那么在RN中如何进行数据存储呢？ RN官方推荐我们在RN中用AsyncStorage进行数据存储# 什么是AsyncStorage? * 简单的，异步的，持久化的key-value存储系统 * AsyncStorage也是React Native官方推荐的数据存储方式，旨在代替Lo...原创 2019-06-17 22:55:45 · 665 阅读 · 0 评论 -
RN网络编程之Fetcg讲解
网络请求是开发APP必不可少的一部分，比如获取用户订单数据，获取商品列表，提交表单等等都离不了网络请求，那么在RN中如何进行网络请求呢？ RN官方推荐我们在RN中用Fetch进行网络请求# 什么是FetchFetch API提供了一个JavaScript接口，用于进行网络操作，例如请求和响应。它还提供了一个全局fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步...原创 2019-06-17 21:48:26 · 469 阅读 · 0 评论 -
如何在ReactNative中使用Redux
# 如何在React Native中使用Redux# 准备工作 根据需要安装以下组件 * redux（必选） * react-redux（必选）：redux作者为方便在react上使用redux开发的一个用户react上的redux库 * redux-devtools（可选）：Redux开发者工具支持热加载、action 重放、自定...原创 2019-06-15 14:00:44 · 342 阅读 · 0 评论 -
RN离线缓存框架设计讲解
在这一节呢我们来学习如何设计一个React Native离线缓存框架# 为什么要离线缓存呢？ 宏观上来说： * 提升用户体验： 我们要为用户提供流畅的APP操作体验，但我们无法保证所有用户的网络流畅度都是好的，所以我们需要离线缓存 来提升用户体验 * 节省流量：节省流量分两个层次： * 节省服务器流量 * 节省用户手机的...原创 2019-06-18 22:55:27 · 568 阅读 · 0 评论 -
Redux精讲
#什么是ReduxRedux 是 JavaScript 状态容器，提供可预测化的状态管理，可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。我们过下整个工作流程：1.用户（操作View）发出Action，发出方式就用到了dispatch方法2.然后，Store自动调用Reducer，并且传入两个参数（当前State和收到的Action），Red...原创 2019-05-30 11:07:21 · 147 阅读 · 0 评论 -
高性能列表组件SectionList详解
# SectionListSectionList是一个基于VirtualizedList的高性能的分组(section)列表组件，支持下面这些常用的功能： * 完全跨平台 * 支持水平布局模式 * 行组件显示或隐藏时可配置回调事件 * 支持单独的头部组件 * 支持单独的尾部组件 * 支持自定义行间分隔线 * 支持下拉刷新 * ...原创 2019-05-22 15:25:13 · 4603 阅读 · 0 评论 -
高性能列表组件SwipeableFlatList精讲
# FlatList的扩展SwipeableFlatList讲解FlatList的扩展Swipeable讲解SwipeableFlatList是一个带滑动显示更多菜单的FlatList组件，是RN在版本0.50中引入的一个组件，不过目前官网还有对SwipeableFlatList的相关介绍，它支持FlatList的所有功能，另外在此基础上添加了对侧滑显示更多菜单的支持。# 属性 ...原创 2019-05-21 22:52:45 · 882 阅读 · 0 评论 -
高性能列表组件FlatList、VirtualizedList精讲
################################################################# FlatList的由来在RN0.43版本中引入了 FlatList,SectionList 与 VirtualizedList,其中VirtualizedList是FlatList与SectionList的底层实现 可能有人要问了，既然有了ListV...原创 2019-05-21 11:59:28 · 2454 阅读 · 0 评论 -
createBottomTabNavigator + createMaterialTopTabNavigator精讲
#################################################################################################createMaterialTopTabNavigator API createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig...原创 2019-05-15 11:49:40 · 778 阅读 · 0 评论 -
createStackNavigator精讲
#####################################################################################################createStackNavigator 提供APP屏幕之间切换的能力，它是以栈的形式管理屏幕之间的切换，新切换到的屏幕会放在栈的顶部屏幕转场风格默认情况下，createStackNav...原创 2019-05-15 10:51:45 · 2215 阅读 · 0 评论 -
createDrawerNavigator + createSwitchNavigator精讲
##########################################################################createDrawerNavigator APIcreateDrawerNavigator(RouteConfigs, DrawerNavigatorConfig) * RouteConfigs（必须）：路由配置对象是从路由名称到路...原创 2019-05-18 21:55:19 · 698 阅读 · 0 评论 -
react-navigation导航器
###########################################从navigator到react-navigation随着react-navigation逐渐稳定，Navigator也被光荣的退休了。在React Native生态环境中需要一款可扩展且易于使用的导航组件，Navigator自然胜任不了，这时React Native社区便孕育出了一个开源导航组件rea...原创 2019-05-08 16:12:33 · 285 阅读 · 0 评论 -
React Native布局知识详解
##########在React Native中布局采用的是FlexBox（弹性框）进行布局。FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范，目前还处于最终征求意见稿阶段，并不是所有的浏览器都支持FlexBox，但大家在做React Native开发时不必担心FlexBox的兼容性问题，因为既然React Native选择用FlexBo...原创 2019-05-08 10:07:11 · 231 阅读 · 0 评论 -
自定义NavigationBar
# 什么是NavigationBarAPP页面的顶部开始： 最上面是状态栏，接下来就是导航栏# 为什么要自定义NavigationBar * 我们需要一款灵活，可扩展，易于使用，可定制程度高的NavigationBar * 虽然react-navigation带有导航栏的功能，但可以定制化程度低，使用不方便，扩展也不方便# 导航栏的构成 左侧按钮 标题 ...原创 2019-06-25 21:48:40 · 275 阅读 · 0 评论