关注
分享
木大白易
我用双手成就你的梦想！
展开
-
React Native入门（十五）之手势系统详解
前言对于Android原生的事件分发机制和手势处理，相信Android开发者已经很熟悉了，那么同样的在RN中也有着一套对应的手势系统和事件处理逻辑！ 触摸响应系统可以使组件在不关心父组件或子组件的前提下自行处理触摸交互。具体的实现在ResponderEventPlugin.js文件中。 用户的每一个操作都应该具有下列属性：反馈/高亮 —— 让用户看到他们到底按到了什么东西，以及松开手...原创 2018-02-07 16:25:00 · 2126 阅读 · 0 评论 -
React Native入门（十四）之动画（1）Animated详解
前言在APP的开发中，流畅合理的动画能大大提高用户体验，Android和iOS原生都有对应的动画系统，同样的在RN中也有用于创建动画的API，就是Animated。Animated库使得开发者可以非常容易地实现各种各样的动画和交互方式，并且具备极高的性能。基本介绍组件类型我们想要文本，图片等可以进行动画，就需要使用Animated进行封装！ 所以创建动画组件有以下5种：Animated.View原创 2017-12-21 19:22:06 · 8351 阅读 · 3 评论 -
React Native入门（十三）之组件的生命周期
前言React Native中组件的生命周期，也就是React.js中Component的生命周期。 英文官方文档：React.Component 类比Android中activity和fragment，了解其生命周期对于我们掌握一个组件从创建到销毁的整个完整的过程和优化逻辑有很大的帮助。图解首先来一张经典的生命周期的图： （图片来自这里） 在图中可以看出大概分为3个阶段：首先getDe原创 2017-12-04 17:19:29 · 836 阅读 · 0 评论 -
React Native入门（十二）之使用第三方字体文件
前言项目中需要展示一些别的平面或者其他民族文字时，需要使用该文字对应的字体文件，一般来说都是.ttf的。在React Native中，使用字体文件就是在style中设置fontFamily属性！ 比如，这里的字体文件为：FangSong.ttf，那么使用fontFamily: 'FangSong'后边不要加.ttf后缀！下边来具体说一下，两个平台使用字体文件时具体的操作！Android平台Andr原创 2017-11-22 11:17:29 · 11906 阅读 · 0 评论 -
React Native入门（十一）之屏幕适配
准备首先，我们在官方文档宽度和高度一节可以知道，RN中单位是dp，这个跟Android中的单位是一致的！ 官网中：A dp is equal to one physical pixel on a screen with a density of 160.To calculate dp:dp = (width in pixels * 160) / screen density这里的 screen原创 2017-10-26 17:08:04 · 5572 阅读 · 0 评论 -
React Native入门（十）之导航组件React Navigation（2）TabNavigator和DrawerNavigator
前言在上一篇博客，了解了React Navigation导航库的StackNavigator的用法，主要用来页面的跳转和标题栏的设置！本篇就来了解一下这个导航库中第二个组件TabNavigator的用法！TabNavigator使用TabNavigator组件呢，看名字Tab就大致可以知道它是一个标签式的导航组件。这个组件呢在Android和iOS平台有不同的显示效果，而且呢在Android平台默认原创 2017-08-21 14:33:06 · 1911 阅读 · 0 评论 -
React Native入门（九）之导航组件React Navigation（1）StackNavigator
前言本篇文章了解一下RN中导航组件的使用，且使用的是官方推荐的一个单独的导航库react-navigation，来分别了解一下这个库里边的StackNavigator，TabNavigator和DrawerNavigator这三个导航组件的基本使用！需要更加深入的了解的可以去官网查看其他相关的API： React Navigation 使用安装react-navigation库首先呢，这个库是单原创 2017-08-18 19:18:46 · 1598 阅读 · 0 评论 -
React Native入门（八）之网络请求Fetch
前言最近有些事情要忙，RN相关的内容没有更新，现在就来了解一下RN中进行网络请求相关的内容！介绍React Native提供了和web标准一致的Fetch API，用于满足开发者访问网络的需求。 关于Fetch API的相关内容，可以到下边网站了解： https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API 我们这先大致说一下在RN中原创 2017-08-18 11:56:47 · 4644 阅读 · 0 评论 -
React Native入门（七）之列表组件的使用(2)关于FlatList的一切
前言在上一篇博客中了解了列表组件的相关内容，主要是静态的展示了一个列表数据，了解了ScrollVIew，FlatList和SectionList的基本用法，本篇文章就深入的了解一个常用的一个列表组件FlatList的用法！属性添加头部组件ListHeaderComponent属性用来给FlatList添加头部组件 简单使用：//ES6之前写法_header = function () { r原创 2017-07-26 19:07:20 · 24999 阅读 · 4 评论 -
React Native入门（六）之列表组件的使用(1)
前言这篇文章来了解一下相关列表组件的使用，这些组件在展示数据的时候比较有用！在Android中有ScrollView，ListView等！那么对应的RN中也有类似的组件！ScrollView没错，在RN中也有ScrollView这个滚动视图组件，跟Android中的ScrollView一样，功能一样，用法呢也一样！ 具体就是这样：<ScrollView> <Text style={{fontS原创 2017-07-24 15:37:16 · 2190 阅读 · 0 评论 -
React Native入门（五）之使用输入框TextInput，按钮Button搭建登录界面
前言这篇文章来了解一下输入框组件TextInput和按钮Button的使用，并结合之前的Flexbox布局来搭建一个简单的登录界面！废话不多说，先上效果图！ 输入框组件TextInputTextInput是一个允许用户输入文本的基础组件。在Android中对应的就是EditText控件。属性autoCapitalize 控制TextInput是否要自动将特定字符...原创 2017-07-21 17:28:43 · 9597 阅读 · 1 评论 -
React Native入门（四）之使用Flexbox布局
前言flex，收缩，弹性的意思。弹性（Flex）宽高关于RN中宽高的设置，我们在上一篇设置Image加载网络图片的时候提到过，首先width和height是两个属性，用来指定一个组件的宽高，使用的时候可以这样： <Image source={pic} style={{width: 200, height: 200}} /> 也可以在外边定义，之后再引用，这个就不多说了！ React Nativ原创 2017-07-20 18:24:09 · 1052 阅读 · 0 评论 -
React Native入门（三）之Props（属性）和State（状态）
前言这篇文章来介绍一下RN的属性和状态，以及在之前Hello World项目中已经出现的比如style等UI样式的使用，之后我们就能使用这些来搭建一些简单的UI界面。还记得搭建环境的时候init的AwesomeProject项目吧，我们把它导入到WebStorm中，下边的内容都可以在里边改代码！ 关于如何运行，可以查看上一篇博客，这里就不赘述了！Props（属性）大多数组件在...原创 2017-07-14 18:03:30 · 3539 阅读 · 0 评论 -
React Native入门（二）之Hello World（AwesomeProject）项目介绍
前言在上一篇博客中，我们介绍了RN环境的搭建，以及遇到的各种坑，历经千辛万苦，终于算是完成了！也生成了一个项目，下面呢，我们就来简单了解一下生成的这个项目及相关的问题项目目录我们使用react-native init AwesomeProject命令，生成了一个AwesomeProject的项目，这个项目呢就算是我们RN的第一个Hello World项目了！我们打开这个项目： 整个项目的目录就原创 2017-07-13 16:18:44 · 2436 阅读 · 2 评论 -
React Native入门（一）之安装，环境搭建
介绍最近需要了解一下React Native，所以第一步先搭建环境！ 废话不多说，开始！ 官网：https://facebook.github.io/react-native/ 中文官网：http://reactnative.cn/ Github：https://github.com/facebook/react-native/ 当然，了解一个新的东西，这些官方的东西是再好不过了，需...原创 2017-07-07 18:50:36 · 5520 阅读 · 0 评论