react-native
关注
分享
扫一扫
文章平均质量分 89
__卓原
程序员~
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
React Native集成Touch ID和Face ID
前言:使用Touch ID也称为指纹身份验证在移动应用程序中非常流行。Touch ID功能可保护应用程序并使其成为用户的无缝身份验证流程。许多银行应用程序，如美国银行，发现，大通，使用Touch ID身份验证，实现安全和无缝的身份验证。用户无需在每次登录时键入长密码，只需允许他们使用Touch ID登录即可。使用iPhone X，我们可以使用Face ID身份验证。Touch ID和Fac...翻译 2018-11-12 14:20:23 · 4636 阅读 · 0 评论 -
react-native-firebase 通知
通知简介React Native Firebase的通知模块支持远程（FCM）和本地通知。远程通知Firebase云消息传递（FCM）允许您的应用程序远程显示通知。为了使事情变得简单易懂，我们将React Native Firebase功能明确划分为仅限数据和通知消息。远程通知：用于在设备上显示可见通知。包含可选的数据有效负载（键/值对的映射），供应用程序使用（如果它位于前台），或者随后打开通知。...原创 2018-07-02 16:38:20 · 3580 阅读 · 0 评论 -
React this.setState 详解
setState(arg1,arg2) 括号内的arg1可传入两种参数，一种是对象，一种是函数. arg2为更改state之后的回调方法,arg2可为空.对象式的setState用法例如：//第一种this.setState({ isAuthenticated: true});this.setState({ isAuthenticated: true},()=>{})...原创 2018-07-02 11:59:02 · 19854 阅读 · 2 评论 -
ReactNative 自定义标题栏 ReactNative 自定义导航栏
先上代码，配合代码讲解一下使用方法， 我这有用到一个屏幕适配工具类，自己写的，使用方法和代码 请点这里/** * Created by 卓原 on 2018/6/16. * */import React from 'react';import { Text, StyleSheet, View, TouchableOpacity, Image...原创 2018-06-18 00:24:30 · 6623 阅读 · 0 评论 -
ReactNative 启动白屏解决方案 react-native-splash-screen
安装1.添加 yarn add react-native-splash-screen 2.自动link react-native link 或者 react-native link react-native-splash-screen修改原生代码Android:通过以下更改更新MainActivity.java以使用react-native-spl...原创 2018-06-29 15:36:31 · 1653 阅读 · 0 评论 -
ReactNative 吸顶
感谢同事提供的店铺UI图和思路。 图录的不太好，但意思差不多表明了。其实如果结构不复杂的话，可以使用SectionList实现，但我这用的是ScrollTabView，ScrollTabView里面还有列表组件，嵌套在SectionList中很麻烦。。。对 我试过了。。。最开始我的思路是： 滚动组件包括ScrollView,ListView,FlatList,Se...原创 2018-06-16 19:58:25 · 5570 阅读 · 16 评论 -
ReactNative 热更新，集成CodePush
开篇先介绍另外一种热更新方式：pushy， 这是rn中文网推荐的，phshy集成方法CodePush简介CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。 CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个中央仓库，开发者可以推送更新...原创 2018-05-16 00:39:13 · 1114 阅读 · 0 评论 -
js判断对象类型的两种方法
在js 中 , 有一种判断数据基本类型的方法 typeof , 只能判断5中基本类型:即 “number”，”string”，”undefined”，”boolean”，”object” 五种。用法为:typeof 1typeof strconsole.log(typeof 1) //打印出 numbertypeof 'a' == 'string' //结果为true...原创 2018-04-27 11:26:51 · 28397 阅读 · 0 评论 -
Promise 的then 与 async await 写法相互转化
本来一直是用then来对promise进行处理的 , 今天在用react-native-stroge的时候发现作者很推崇async await的写法 于是研究了一下,把自己的代码替换了. 下面进入正题在使用的时候,我存值时是这么写的: // 存值 createData(title, successBack, errorBack) { // 使用key保...原创 2018-05-04 16:52:10 · 22795 阅读 · 2 评论 -
ReactNative面试题
1 . 打印出a的值是?if(true){let a = 1} alert(a)答: a is not defined let不存在变量提升，且作用域只在代码块 这样看你可能有点不太清楚,我们来格式化代码if (true) { let a = 1}alert(a)这样是不是一目了然了?! 博主第一看的的时候没有仔细看,匆匆就写了个1 ,尴尬. 扩展1.va...原创 2018-04-17 16:41:19 · 3806 阅读 · 0 评论 -
ReactNative 原生UI组件 桥接原生 Android
React Native已经封装了大部分最常见的组件，譬如ScrollView和TextInput，但不可能封装全部组件。而且，说不定你曾经为自己以前的App还封装过一些组件，React Native肯定没法包含它们。幸运的是，在React Naitve应用程序中封装和植入已有的组件非常简单。原生视图需要被一个ViewManager的派生类（或者更常见的，SimpleViewManager的派...原创 2018-04-02 16:10:00 · 2610 阅读 · 1 评论 -
ReactNavigation 重置路由栈的两种方法 以及SwitchNavigator不处理回退操作
我们在项目中尝尝有这样的需求 , 给app添加一个广告业/启动页/引导页等等, 之后进入app的主页面 , 前面的 广告业/启动页/引导页 不提供入口,并且按返回键也不会回到那个页面. 一般我们会跳转到主页之后重置路由,今天提供两种方法来实现.首先是跳转之后重置路由://首先导入NavigationActionsimport {NavigationActions} from 'react...原创 2018-03-02 14:28:48 · 13499 阅读 · 2 评论 -
react-native-firebase 登录功能集成与实现
以下内容基于 react-native-firebase 版本4.1 安装iOS安装首先确保您已遵循。初始设置指南 Add the pod将以下内容添加到您的Podfile：pod 'Firebase/Auth'run pod update。如果您打算使用电子邮件登录链接，那么您还需要遵循。iOS动态链接安装指南Android安装添加依赖项...原创 2018-07-02 17:37:56 · 4974 阅读 · 0 评论 -
React Native Firebase
React Native Firebase 介绍RNFirebase使用Firebase和React Native简单。它是一个轻量级的图层，位于iOS和Android的原生Firebase库的顶部，尽可能地反映Firebase Web SDK。虽然Firebase Web SDK库可以与React Native一起使用，但它主要是为Web构建的。RNFirebase为iOS和Andro...原创 2018-07-03 10:00:25 · 2164 阅读 · 0 评论 -
observable.map 介绍
Observable 映射observable.map(values, options?)observable.map(values?) - 创建一个动态键的 observable 映射。 如果你不但想对一个特定项的更改做出反应，而且对添加或删除该项也做出反应的话，那么 observable 映射会非常有用。 observable.map(values) 中的 values 可以是...原创 2018-08-24 10:43:40 · 6354 阅读 · 0 评论 -
ReactNavigation V2 监听物理返回键
首先导入BackHandler组件import { BackHandler,} from 'react-native';在构造函数中监听,并在willunmount中取消它constructor(props) { super(props); this.state = {}; BackHandler.addEventListene...原创 2018-08-07 11:06:15 · 2176 阅读 · 6 评论 -
React Navigation 跳转页面时回调
跳转页面时，传递参数，把回调方法作为参数传递进去。onPress={() => this.props.navigation.navigate('cameraID', { onBack: (imgUri) => { this.setState({kt...原创 2018-08-10 14:18:12 · 1810 阅读 · 0 评论 -
ReactNative 倒计时组件 react-native-zyCountDown
react-native-zyCountDown用于react-native的计数组件，倒计时组件封装的一个倒计时按钮,仅仅使用TouchableOpacity，View和Text. 安装npm i react-native-zycountdown或者yarn add react-native-zycountdown使用两个使用方式样式分别对应下面...原创 2018-07-20 16:34:50 · 2771 阅读 · 0 评论 -
JavaScript 加密库 crypto-js
介绍github地址 CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法。目前已支持的算法包括：MD5SHA-1SHA-256AESRabbitMARC4HMAC HMAC-MD5HMAC-SHA1HMAC-SHA256PBKDF2安装 npm install crypto-js使用impor...原创 2018-07-19 18:41:28 · 9126 阅读 · 0 评论 -
react native Linking 打电话 发短信 打开其他App等
使用Linking打开webURL 邮箱 联系人等,其实Linking相当于android的Intent：使用方式为: Linking.openURL(string) <TouchableOpacity onPress={() => { ...原创 2018-07-06 17:32:48 · 6026 阅读 · 0 评论 -
React-Navigation V2 使用教程 (四) withNavigation
withNavigationwithNavigation是一个更高阶的组件，它将navigationprop 传递给一个包装组件。当你不能navigation直接将prop 传递给组件时，或者在深度嵌套的子级的情况下不想传递它时，它很有用。withNavigation(Component) 返回一个Component。 例import React from 'react';impo...原创 2018-07-05 14:59:02 · 1790 阅读 · 0 评论 -
React-Navigation V2 使用教程 (三) createSwitchNavigator
witchNavigator的目的是一次只显示一个屏幕。 默认情况下，它不处理后退操作，并在您切换时将路由重置为其默认状态。API createSwitchNavigator(RouteConfigs, SwitchNavigatorConfig);RouteConfigs路由配置对象是从路由名称到路由配置的映射，它告诉导航器为该路由提供什么，请参阅createStac...原创 2018-07-05 14:56:27 · 3213 阅读 · 4 评论 -
React-Navigation V2 使用教程 (二) createBottomTabNavigator
使用import { createBottomTabNavigator } from 'react-navigation';示例继续使用我们上节的代码，如果没有，可以重新建立两个页面文件HomeScreen,DetailsScreen/** * Created by 卓原 on 2018/7/4. * */import {createStackNavigator, c...原创 2018-07-05 13:32:51 · 12377 阅读 · 0 评论 -
React-Navigation V2 使用教程 (一) createStackNavigator
前言：ReactNavigation出现很久了，并且在最近发布了V2版本，有一些功能的优化，和api的变化。原来的文档已经不适用了，所以新写一篇用来记录一下细节的东西。本篇内容是参照官方英文文档完成。安装//推荐yarnyarn add react-navigation# or with npm# npm install --save react-navigation...原创 2018-07-04 16:40:45 · 14050 阅读 · 4 评论 -
react-native-i18n 语言切换工具
yarn add react-native-i18nAndroid在./android/settings.gradle文件中添加下列代码:include ':app', ':react-native-i18n'project(':react-native-i18n').projectDir = new File(rootProject.projectDir, '../node_m...原创 2018-06-29 00:08:06 · 3667 阅读 · 0 评论 -
ReactNative 封装fetch网络请求
封装的fetch方法类/** * Created by 卓原 on 2017/11/14. * [email protected] *//** * 请求头 * @type {{Accept: string, Content-Type: string}} */const header = { 'Accept': 'application/json', ...原创 2018-03-01 17:36:20 · 939 阅读 · 0 评论 -
reactnative热更新 react-native-pushy
快速入门-准备工作首先你应该有一个基于React Native开发的应用，我们把具有package.json的目录叫做你的”应用根目录”。如果你还没有初始化应用，请参阅开始使用React Native。所以我们也假设你已经拥有了开发React Native应用的一切环境，包括Node.js、npm、XCode、Android SDK等等。如果你之前没安装过，你还必须安装Androi...原创 2018-02-08 17:09:03 · 4194 阅读 · 1 评论 -
ReactNative 抽屉组件 侧滑栏 react-native-side-menu
示例图:安装npm install react-native-side-menu --save使用引入组件import SideMenu from 'react-native-side-menu';使用组件:render() { const menu = Text style={{marginTop: 22}}>aaaText原创 2018-02-06 14:50:12 · 7528 阅读 · 1 评论 -
react-native 获取网络状态
ReactNative 中有 个模块NetInfo,可以获取设备的联网或者离线状态。有如下几个方法：//获知设备联网或离线的状态信息NetInfo.fetch().done((reach) => { // alert(reach);});这个reach为获取到的网络状态，有如下字段：IOS以异步的方式判断设备是否联网，以及是否使用了移动数原创 2017-08-04 16:04:12 · 2321 阅读 · 0 评论 -
react-native 轮播图 ——react-native-swiper使用
今天学习了轮播图的使用，上网查阅了一下，发现有react-native-swiper和React-Native-Viewpager 两种封装的比较好的第三方组件，对比了下文档，觉得react-native-swiper功能更加完善，而且文档说明比较全面，所以只用了react-native-swiper，下面介绍下react-native-swiper的使用。该组件同时支持android和iOS。原创 2017-05-23 23:02:31 · 33911 阅读 · 20 评论 -
react-native 仿京东加入购物车动画效果
我们先看一下 京东加入购物车的动画是怎样的:然后看一下,我目前的实现效果(后续会完善) :原创 2017-08-18 10:50:23 · 2127 阅读 · 0 评论 -
react-native SectionList的使用
之前facebook发布了高性能的列表组件 Flatlist（可理解为优化后的Listview），后来又增加了一个SectionList。属于增强版的Flatlist，支持头部悬浮等，如果你的列表不需要分组(section)，那么可以使用结构更简单的<FlatList>。关于FlatList的使用，可参考：react-native flatlist 的进阶使用而且二者之间有...原创 2017-08-03 16:25:11 · 4552 阅读 · 1 评论 -
react-native播放视频组件 react-native-video的用法
react-native-video 是一个播放视频的开源组件，它的用法很简单。1.安装依次执行下面两个命令，npm i -S react-native-videoreact-native link (这一步是连接本地视频库)(1) ios：如果您想允许其他应用在您的视频组件上播放音乐，请添加：AppDelegate原创 2017-06-10 16:55:18 · 27594 阅读 · 7 评论 -
react-native 轮播组件 looped-carousel使用介绍
一 关于轮播类组件，网上其实已经有挺多了，本人曾经用过 swiper，viewpager，以及facebook出品的viewpagerAndroid。swiper因在安卓上有问题，而且在组件嵌套使用时问题较多，所以弃用。后来尝试viewpager，因为轮播时，下面的圆点显示有误，所以弃用。而ViewpagerAndroid因为只支持安卓系统，所以很少用到，在ios必须另找组件。最近原创 2017-07-31 14:58:42 · 8649 阅读 · 7 评论 -
React-Native 发送和接收事件DeviceEventEmitter
写原生的时候，我们经常会用到广播，接口，回调等方法来实现发送和接受通知以及通信的。那么在RN中，也有一套发送和接收通知的方法，用的组件是DeviceEventEmitter。下面看一下，RN中是如何发送和接收事件的：1 首 先 ，导入DeviceEventEmitter组件：import { View, Text, Button, Dev原创 2017-07-08 15:17:39 · 15425 阅读 · 0 评论 -
react-native 定时器
定时器是一个应用中非常重要的部分。React Native实现了和浏览器一致的定时器Timer定时器：setTimeout, clearTimeoutsetInterval, clearIntervalsetImmediate, clearImmediaterequestAnimationFrame, cancelAnimationFramerequestAnimati原创 2017-06-26 22:29:35 · 2181 阅读 · 0 评论 -
react-native Alert组件
Alert是一个提示对话框，包含对应的标题和信息。RN有默认的alert方法可以使用，例如：alert('哈哈哈')但是太过单一，只能弹出一个文字如果想弹出稍微复杂点的，例如原生的有很多按钮的提示框则需要Alert组件。首先来看一下文档的描述：iOS：在iOS上你可以指定任意数量的按钮。每个按钮还都可以指定自己的样式，此外还可以指定提示的类别。参阅AlertIOS来了解更多细节原创 2017-06-26 21:24:56 · 10898 阅读 · 2 评论 -
react-native调用Android原生模块
今天学习了一下在react-native中调用原生安卓模块的使用，发现很多网上的文章都是直接照抄的文档，这样会有一些坑，导致最后无法运行或者成功调用，所以写下这个博客来分享，同时也记录一下学习过程，方便以后查看。学习理由：有时候App需要访问平台API，但React Native可能还没有相应的模块包装；或者你需要复用一些Java代码，而不是用Javascript重新实现一遍；又或者你需要原创 2017-06-12 23:23:09 · 3446 阅读 · 5 评论 -
react-native Modal的学习与使用
原生有Dialog，Toast之类的弹窗控件，React-Native虽然也有Dialog，但是并不好用，所幸有Modal这个组件，使用起来简单，而且还比较好用。之前一直有知道这个控件，但因为没有需要用到所以没有看过如何使用，今天同事有需要，就看了一下，写了个demo，自己也趁机学习下Modal的使用。 一.首先是使用，导入Modal组件。 import { AppR...原创 2017-06-23 00:15:13 · 4905 阅读 · 0 评论 -
React Native 动画 ---Animated
关于Animated动画，使用的时候组件不能直接写要写成 Animated.Text>Animated.Text>先实现一个简单的动画：首先导入动画组件：import { StyleSheet, Text, View, Animated, Easing,} from 'react-native';看一下要实现原创 2017-06-20 23:56:35 · 1108 阅读 · 0 评论