MrOnion0603-CSDN博客

原创 react native学习笔记29——动画篇 Animated高级动画

1.前言上一节我们学习了全局的布局动画api——LayoutAnimation，体验到其流畅柔和的动画效果，但有时我们需要实现一些更精细化的动画，或者完成一些组合动画，这时我们可以使用React Native提供的另一个高级动画api——Animated。 Animated使得我们可以非常容易地实现各种各样的动画和交互方式，并且具备极高的性能。Animated旨在以声明的形式来定义动画的输入...

2018-03-19 21:10:38 10876 5

原创 react native学习笔记28——动画篇（2）LayoutAnimation布局动画

1.前言LayoutAnimation——布局动画，当布局变化时，会自动将组件运动到新的位置上。相较于RequestAnimationFrame，LayoutAnimation可以更方便的实现出“弹性动画”，“缓入缓出”等效果。使用LayoutAnimation的常用方法是调用LayoutAnimation.configureNext方法，然后使用setState设置组件的状态。2...

2018-03-05 21:08:02 1904

原创 react native学习笔记27——动画篇（1）requestAnimationFrame帧动画

1.前言动画是移动应用中的一个相当重要的组成部分，一个用户体验良好的应用通常都具有流畅、有意义的动画。类似原生平台，React Native也为我们提供了丰富的动画API：requestAnimationFrame、LayoutAnimation、Animated。requestAnimationFrame:帧动画，是最容易实现的一种动画，通过不断改变组件的state值，从而在视觉上产生...

2018-03-01 20:44:59 4000

原创 react native学习笔记26——iOS原生模块的封装与调用

1.前言上一篇文章介绍封装Android原生模块，今天将介绍如何封装ios原生模块供React native调用。在React Native中，ios平台原生模块是一个实现了RCTBridgeModule协议的Objective-C类，其中RCT是ReaCT的缩写。这里会涉及到一些Objective-C的代码编写，不过不用担心，有一定的ios开发的基础当然更好，如果你之前从未接触使用过Obje...

2018-02-27 19:42:37 1547

原创 react native学习笔记25——Android原生模块的封装与调用

前言之前我们学习了React Native的部分api，可以看到React Native为我们封装了非常丰富的api，即使如此有时候我们的应用需要进行访问原生平台系统的api接口，但是React Native可能还没有封装相应功能组件或api, 这种情况我们可以自己封装原生平台的组件。本文将介绍对Android原生组件封装，使我们能在React Native中调用原生模块。下面以我们在Andr...

2018-01-27 14:54:04 521

原创 react native学习笔记24——Modal实现自定义弹出对话框

前言上一篇文章介绍React Native系统提供的两个弹出框的api——Alert与AlertIOS，Alert可以在双平台通用，但是只能展示信息量有限功能单一的文本对话框。AlertIOS比Alert稍微丰富一点，可以展示供用户输入的对话框，但只能在iOS中使用。但是如果我们想在Android平台实现带输入框的提示框呢？或者有需求要定制功能更复杂的对话框，如带多选项的对话框？这时我们可以通

2018-01-26 17:29:56 6591 1

原创 react native学习笔记23——常用API（5）弹出框Alert、AlertIOS

前言React Native中提供弹出对话框的api有两个——Alert与AlertIOS，前者在Android平台和IOS平台通用，后者只能适用于IOS平台。既然Alert双平台通用，为何还需要AlertIOS？主要是由于AlertIOS功能更丰富一些。Alert可弹出一个提示对话框，包含对应的标题和信息，该弹出框可以提供一系列的可选按钮（Android中最多三个），点击任何一个按钮都会调用

2018-01-05 17:17:43 1695

原创 react native学习笔记22——常用API（4）ToastAndroid、BackHandler及特定平台代码常用写法

前言前面三节中介绍的React Native官方提供的api都是双平台通用的api，在React Native中也有一些只在特定平台才能使用的api，官方的命名也很友善，只适用于Android的api通常叫XXXAndroid,同理只使用于iOS的通常叫XXXIOS，例如今天将介绍的ToastAndroid。但也有例外，例如BackHandler，只适用于Android平台，用于返回键处理的api，

2018-01-03 17:12:16 1574

原创 react native学习笔记21——常用API（3）Geolocation定位、Keyboard键盘

前言今天主要介绍React Native中获取定位的api——Geolocation,及控制软键盘相关事件的api——Keyboard这两个模块。GeolocationReact Native 提供自带的定位api——Geolocation获取定位信息及监听位置变化。该定位API遵循web标准。Geolocation方法1 static getCurrentPosition(geo_success:

2017-12-15 17:54:55 1245 2

原创 react native学习笔记20——常用API（2）AppState应用前后台、NetInfo网络状态

判断应用的状态是在前台还是后台，以及获取应用是否联网，是wifi或流量连接等这些基本应用信息在APP开发中是十分常见的功能。今天就分别介绍AppState（获取应用状态信息）,NetInfo（获取网络信息）这两个模块。AppStateAppState可以获取当前APP是在前台还是在后台运行，并且当APP的运行状态发生改变的时会收到通知。AppState通常在处理推送通知的时候用来决定内容和对应的行为

2017-12-14 18:32:12 1730

原创 react native学习笔记19——常用API（1）Dimensions、PixelRatio获取屏幕宽高及单位换算

Dimensions在React Native中通常使用Dimensions获取屏幕宽高。Dimensions的方法Dimensions的使用很简单，它只提供了两个方法：static set(dims: {[key:string]: any}) 该方法应该只能被原生代码进行调用。 @param {object} dims 一个简单的字符串作为key的对象，包含了需要设置的屏幕宽高信息。sta

2017-12-11 18:43:49 2885

原创 react native学习笔记18——存储篇（3）Realm

前言Realm是一款新兴的针对移动平台设计的数据库，使用简单、跨平台、性能优越功能强大。其官网地址为：https://realm.io/。Realm与sqlite在性能上各有优势，但其更加简单易用，学习成本低。配置1. 安装在项目的根目录下执行cmd命令：npm install --save realm2. 将项目关联realm原生模块库react-native link realm 注意：在A

2017-11-24 16:52:09 1165

原创 react native学习笔记17——存储篇（2）SQLite

前言对于存放数据量小且简易的数据我们可以通过AsyncStorage来存储，但对于数据结构复杂、数据量大的数据，我们可以使用移动开发中常用的SQLite来处理。 SQLite是一种轻型的数据库，多用于移动端开发，在原生应用开发中比较常见。使用React Native并没有提供使用sqlite的组件，我们可以通过使用第三方组件react-native-sqlite来使用原生的SQLiteDataba

2017-11-15 18:53:00 6353 1

原创 react native学习笔记16——存储篇（1）AsyncStorage

前言React Native中常用的数据本地化存储的方法有如下几种：AsyncStorage：以键值对的形式存储的轻量存储器，只能存储字符串数据。SQLite：一种轻型的数据库，多用于移动端开发，原生应用开发中比较常见。Realm：新兴的移动端数据存储方法，使用简单、跨平台、性能优越功能强大。本文主要主要介绍第一种——AsyncStorage。AsyncStorage介绍AsyncStora

2017-11-08 19:18:04 2249 1

原创 react native学习笔记15——Picker、Switch、Slider

本文将介绍三个常用的组件Picker、Switch、Slider，它们都是官方提供的，并且均可以在android与ios渲染对应的原生组件。这三个组件的使用很简单，在实战开发中也很常见，因此这里放在一起介绍。Picker选择器Picker选择器，通常可用作下拉菜单，城市选择器等。其使用方法如下：import React, { Component } from 'react';import {

2017-10-31 19:12:32 1489

原创 react native学习笔记14——WebView的使用及与html通信

加载一个在线网页下例是一个最简单的WebView的使用，给定一个url网址，用WebView加载渲染出来。import React, { Component } from 'react';import { WebView } from 'react-native';export default class WebViewSimpleDemo extends Component { rend

2017-10-27 17:13:15 1807

原创 react native学习笔记13——FlatList上拉加载

我们可以利用官方组件RefreshControl实现下拉刷新功能，但React Native官方没有提供相应的上拉加载的组件，因此在RN中实现上拉加载比下拉刷新要复杂一点。虽然没有直接提供上拉加载的组件，不过我们仍可以通过FlatList的onEndReached与onEndReachedThreshold属性来实现相应效果。ActivityIndicator这里上拉加载的转圈效果用Activi

2017-10-25 14:14:49 17820 7

原创 android 对字符串单复数显示处理

对于个数，中文在单复数是没有区别的，所以我们平时开发中也不会注意到这个问题，但是别的语言中常常单复数有不同的表示。当App实现国际化功能后字符串的单复数问题越来越明显。以英文为例，在处理个数的时候单复数是不同形的，例如：中文：1分钟，2分钟,…, n分钟英文：1 minute，2 minutes，…，n minutes面对这个问题，最初我想到的解决办法是minute(s)，用这个(s)来笼统

2017-10-18 10:20:29 2837

原创 react native学习笔记12——RefreshControl下拉刷新

RefreshControl是React Native官方提供的下拉刷新组件，用在ScrollView和FlatList内部，为其添加下拉刷新的功能。它是对原生平台下拉刷新组件的一个封装，使用起来比较方便快捷，体验类似Native的下拉刷新组件，但其缺点是不能进行自定义下拉刷新头部，并且只能使用与ScrollView，FlatList这种带有滚动功能的组件之中。以ScrollView为例，当Sc

2017-10-10 19:32:22 3381

原创 react native学习笔记11——react-native-swiper轮播图

react native swiper可以实现广告轮播图和应用引导页的效果。如：安装react-native-swiper是第三方组件，通过nmp来安装。在项目的根目录下，通过输入npm install react-native-swiper --save引入在要使用swiper的页面importimport Swiper from 'react-native-swiper'基本使用方法import

2017-09-27 20:06:22 4860 1

原创 react native学习笔记10——react-navigation的嵌套使用

前面介绍了react-navigation的StackNavigator、TabNavigator、DrawerNavigator 的基本使用方法，在实际项目中通常需要嵌套这几种导航方式。下面介绍这几种导航方式的嵌套使用方法。1.StackNavigator与TabNavigator的嵌套使用StackNavigator与TabNavigator嵌套的App有很多，例如淘宝、京东等，下部选项卡导航，

2017-09-24 17:42:23 4383 6

原创 react native学习笔记9——引入第三方组件和react-navigation的使用

前面我介绍过几个常用的内置组件的使用方法，对于一些较为复杂的需求可能需要写自定义组件来满足，但是有些时候第三方库的组件可以完美的满足相应的需求，没必要自己去实现一套，这时我们不妨利用现有的轮子，方便快捷，省时省事。首先介绍引入第三方组件的方法。1.引入第三方组件1.1.引入第三方库，进入项目的根目录（即package.json所在目录），输入命令：npm install [第三方库] --sav

2017-09-20 19:27:24 4879 3

原创 android-获取相册图片及部分手机崩溃问题修复

Android开发中经常会有获取相册图片的需求，实现这一功能也很简单，总共就两步操作。1.本地相册获取照片 Intent intent = new Intent(); intent.setType("image/*"); intent.setAction(Intent.ACTION_GET_CONTENT); startActivityForResult(inten

2017-09-14 17:25:52 1764

原创 react native学习笔记8——网络请求

react native提供ajax和fetch的网络请求的方式，ajax即XMLHttpRequest (XHR)，是一种传统的网络请求的方式，其配置和调用方式比较混乱，不符合职责分离的原则，基于事件的异步模型的写法，没有采用Promise的fetch简洁。因此本文重点介绍fetch进行网络请求的用法，关于ajax只介绍其基本使用方法。fetchfetch的基本格式为：fetch(url, fe

2017-09-12 19:18:43 911

原创 react native学习笔记7——组件生命周期

每个组件都有自己的生命周期，在其生命周期内，组件经历了初始化-运行-销毁的过程。在运行阶段，每次状态（state）或属性(props)发生变化时，都有对应的组件方法将该变化通知给组件进行渲染刷新（关于state和props的介绍可以看上一节react native学习笔记6——Props和State）。下图是经典的组件生命周期图解（ES6），该图显示了组件在生命周期的各个时期系统调用的方法。下面我们

2017-09-06 21:21:54 1508

原创 android-jni RegisterNatives注册本地方法

RegisterNatives的使用方法在Android中通过jni调用本地方法（c/c++），通常使用javah生成规范的头文件，定义一个函数实现本地方法，函数名必须使用本地方法的全类名的规范来写。　 Java_ + 包名 + 类名+ 接口名注意名字之间用下划线，下面是示例： JNIEXPORT jstring Java_com_example_test_MainActivity_hell

2017-08-29 17:29:58 1277

原创 react native学习笔记6——Props和State

Props（属性）和State（状态）是React Native中很重要的两个概念。使用Props和State，结合前面学的基本组件如View、Image、 Text、 FlatList等可以实现各种自定义组件、酷炫的UI效果。Props（属性）props是组件中不可变的属性。官网的定义：大多数组件在创建时就可以使用各种参数来进行定制，用于定制的这些参数就称为props。props是在父组件中指定，

2017-08-26 18:02:50 633

原创 react native学习笔记5——布局实战篇

目标基础知识的学习只有在实践中使用才更容易被理解与吸收，前面几节都是在介绍基本的属性概念，我自己是一个比较健忘的人，我估计很多人也跟我一样在学了基本概念后过不了多久就忘了，或者只是有个印象却不知道该怎么用该在何处运用这些特性。本节我们将运用前面所介绍的基本概念，进行布局实战，实现如下效果：在此之前先介绍一下几个常见的网格布局。网格布局网格布局示例的完整代码在: https://githu

2017-08-23 21:47:36 2806

原创 react native学习笔记4——FlexBox布局

FlexBoxReact Native是采用FlexBox（弹性）布局，使用FlexBox规则来指定某个组件的子元素的布局，FlexBox提供了在不同尺寸设备上都能保持一致的布局方式，它是CSS3弹性框布局规范，因此熟悉前端的同学可能对此感到很亲切，不过React Native的FlexBox与web上的CSS也存在少许差异。首先是默认值不同：flexDirection的默认值是column而

2017-08-19 18:11:04 2598 2

原创 react native学习笔记3——常见的基本组件简介

本文是我整理的各个常用组件的基本使用方法，主要简要几个常见的基本组件，作为入门材料使初学者对RN中的常用组件有个直观的了解，快速入门，加强学习的成就感，增强学习RN的动力，不会面面俱到的详细讲解组件中的各个属性的含义及用法，如需深入了解可以查看官网文档。Demo代码的使用相关的Demo代码可以在https://github.com/mronion0603/ReactNativeExercise下载，

2017-08-16 23:07:20 1164

原创 android-如何在jni中C/C++层打印log到logcat

最近在做android jni的开发，需要输出一些log方便调试分析问题，但是jni层里不能像纯android开发一样直接Log.v("xxx",xxx) ,而使用C中常用的printf也不起作用。下面将在网上找到的方法，经过验证整理出来。在jni的C++层打印log信息的步骤1.在Android.mk文件中加入:LOCAL_LDLIBS := -llog2.在要使用LOG的cpp文件中加入：

2017-08-15 14:32:59 4207 1

原创 react native学习笔记2——Hello World和组件构成简介

相信配置好rn环境的朋友，在初始化好第一个项目AwesomeProject后会忍不住尝试动手改一改、试一试。下面还是遵循古老传统从hello world开始表演，可以在最初搭建好环境时新建的第一个项目AwesomeProject的基础上，用下面的代码覆盖你的index.ios.js或是index.android.js 文件(在项目的根目录下)，然后运行看看。Hello Worldimport Rea

2017-08-14 21:18:59 993

原创 react native学习笔记1——webstorm安装与配置

工欲善其事必先利其器，选择一个趁手的IDE，码起来代码来是事半功倍。本人由于也是初学RN，对各个前端IDE其实并没多少接触，之前只用过Sublime，对我而言Sublime更像是个文本编辑器，但它确实比较轻便。而本文要介绍的webstorm选择它作为RN的开发工具原因有两个：好多人推荐都推荐, 不过确实挺方便的，自动补全，调试都很方便；与IntelliJ IDEA很像，本人是做Android

2017-08-10 22:23:36 5175

原创 react native学习笔记0——windows环境搭建

本文基本步骤是参考RN中文官网结合自己实际搭建体验而来，由于Chocolatey被墙，所以python2和nodejs直接分别在对应的官方网站下载安装的。下面正式介绍从零开始搭建react native的Windows开发环境。首先准备Android的环境，如果你是写Android native的开发者可以直接忽略1，2步直接到第3步。1. 安装Java 的JDK官网地址:ht...

2017-08-09 13:48:22 938

原创 git常用指令及常见错误解决方法

git stash 暂存当前正在进行的工作可用来暂存当前正在进行的工作，比如想pull 最新代码，又不想加新commit，或者为了fix 一个紧急的bug, 先stash, 使返回到自己上一个commit, 改完bug之后再stash pop, 继续原来的工作，或者希望保留生产服务器上所做的改动,仅仅并入新配置项, 处理方法如下:git stashgit pull #or do somet

2017-08-06 16:35:08 598

原创如何在github上搭建自己的个性blog——Windows版

初衷本文适用于跟我一样的前端小白，却又想搭建一个属于自己的博客站点玩玩，可以自己DIY样式，构建属于自己的网站，但又不想花费太多精力维护。在搭建博客之前我也百度找了很多教程，网上的教程五花八门，但对于想完整的从无到有，让一个前端小白，从零开始搭建一个自己看着觉得样式还不错的博客站点，这样的文章比较少。本人写下此文仅记录自己用Github Pages 搭建博客的过程，及帮助后面的朋友们少绕点弯路。其中

2017-08-05 18:04:58 518

原创 Android bindservice失败解决方法

1.bindservice失败现象：this.bindService(bindIntent, conn, Context.BIND_AUTO_CREATE);相同的代码以前使用一直很正常，但最近在项目中使用却一直绑定失败，bindservice返回false。原因：使用了TabActivity, TabActivity里的子Activity调用this.bindservice,导致失败。该问题属于G

2017-08-02 14:46:55 6500 1

原创 android webview图片文件上传兼容性问题——上传控件点击无效的解决办法

android webview图片文件上传兼容性问题——上传控件点击无效的解决办法现象描述：在android的webview中，如果web页面中带有< input type=”file” …>的控件，在webview中虽然能正常显示这个上传控件，但是在部分手机上点击却没有任何反应。查找原因经过大量机型验证发现5.0以下的可以正常显示出来，5.0及以上的手机点击无反应。初步可以判定是Webview的兼

2017-07-20 22:48:19 11176 4

原创 Android 线程池—ThreadPoolExecutor理解与使用

使用线程池的好处可以归纳为3点：重用线程池中的线程，避免因为线程的创建和销毁所带来的性能开销.有效控制线程池中的最大并发数，避免大量线程之间因为相互抢占系统资源而导致的阻塞现象.能够对线程进行简单的管理，可提供定时执行和按照指定时间间隔循环执行等功能.ThreadPoolExecutor是Executors类的底层实现。android中线程池的概念来源于java中的Executor,线程池

2017-07-18 17:28:27 2113

原创 ListView中headerview的动态显示和隐藏的问题

ListView中headerview的动态显示和隐藏的问题Android1.动态设置headerview的方法动态设置headerview有两个思路。方法一将header的布局写在list item的布局文件中，在adapter中通过判断position的值是否为0动态控制其显示或隐藏。代码示例: item.xml布局文件<?xml version="1.0" encoding="utf-8

2017-07-05 16:21:11 3710

android使用webview上传文件兼容问题解决支持5.0以上系统

C++超级马里奥的游戏

空空如也