![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React-Native
文章平均质量分 55
SnowAnna
不像代码妹子的代码妹子,爱研究新事物,但是又研究不深入,记性不好就爱总结,都说大树底下好乘凉,希望各位大神路过的时候多多指点,带我飞呦.........
展开
-
react-native 仿网易云音乐旋转唱片动画
一直觉得网易云音乐的播放界面很酷,现在利用react-native 动画实现这个界面.要点有两个,1图片要变园使用borderRadius=1/2height.2动画处理改变图片的旋转角度Untitled.gif使用方法,直接react-native init 一个项目,然后把这段代码复制到入口文件中下面看代码/** * Sample React Native转载 2017-04-13 14:05:08 · 1527 阅读 · 0 评论 -
React Native提高在模拟器上的运行速度
最近在模拟器上运行项目的时候发现卡顿特别严重,在无数次的试验中找到了一个好的方法在命令行执行命令$ react-native link会出现如下提示rnpm-install info Linking react-native-video ios dependencyrnpm-install info iOS module react-native-video has been原创 2017-04-26 16:19:09 · 751 阅读 · 0 评论 -
写给移动开发者的 React Native 指南
原文地址 http://www.jianshu.com/p/b88944250b25前言React Native 诞生于 2015 年,名副其实的富二代,主要使命是为父出征,与 Apple 和 Google 抗衡,为开发者带去一套跨平台、动态更新的 Javascript 框架,口号是:Learn once, write anywhere:Build mobile apps with Rea转载 2017-09-28 14:50:47 · 496 阅读 · 0 评论 -
在react-native中使用redux
原文http://www.jianshu.com/p/2c43860b0532redux是什么?redux是一个用于管理js应用状态的容器。redux出现时间并不是很长,在它出现之前也有类似功能的模块出现,诸如flux等等。redux设计的理念很简单,似乎最初这个开发团队就有让redux可以方便融入在server, browser, mobile client端的打算。目前在g转载 2017-09-28 16:51:33 · 230 阅读 · 0 评论 -
React-Redux学习文档v1
参考链接:Redux中文文档Redux 入门教程-阮一峰看漫画,学 Redux在react-native中使用redux[React Native]Redux的基本使用方式Redux管理复杂应用数据逻辑目录应用场景使用的三原则单一数据源状态是只读的通过纯函数修改Stateredux状态管理的流程及相关概念storeActionAction 创建函数(Ac转载 2017-09-29 14:31:16 · 1156 阅读 · 0 评论 -
react-native 屏幕尺寸和文字大小适配
现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同,比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到了其他设备可能就会偏小或者偏大,这就需要我们对屏幕进行适配。安卓原生的话有自己的适配规则,可以根据不同的尺寸建立不同的文件夹,系统会根据当前的设备尺寸取对应的大小的布局。而RN本身并没有适配规则转载 2017-11-04 14:17:51 · 423 阅读 · 0 评论 -
React Native常用组件Image使用
Image组件的常见属性属性方法onLoad(function):当图片加载成功后,回调该方法onLoadStart(function):当图片开始加载的时候调用该方法onLoadEnd(function):当图片加载失败回调该方法,不会管图片加载成功还是失败onLayout(function):当 Image 布局发生变化会调用该方法,调用代码原创 2018-01-10 16:04:54 · 368 阅读 · 0 评论 -
《React-Native系列》 API模块之PixelRatio和Dimensions
PixelRatio和Dimensions 是ReactNative提供的API,这个在我们编写RN页面的时候必须要使用的。PixelRatio我们还是先看看官网怎么介绍的。PixelRatio类提供了访问设备的像素密度的方法。根据像素密度获取指定大小的图片如果应用运行在一个高像素密度的设备上,显示的图片也应当分辨率更高。一个取得缩略图的好规则就是将显示尺寸原创 2017-11-18 16:00:39 · 441 阅读 · 0 评论 -
RN支持的样式
支持的样式:Valid style props : [ alignItems alignSelf, backfaceVisibility, backgroundColor, borderBottomColor, borderBottomLeftRadius, borderBottomRightRadius, borderBottomWidth原创 2018-01-10 16:05:39 · 1151 阅读 · 0 评论 -
React Native 项目常用第三方组件汇总:
React Native 项目常用第三方组件汇总:React-native-animatable 动画react-native-carousel 轮播react-native-countdown 倒计时react-native-device-info 设备信息react-native-fileu原创 2018-01-10 16:06:24 · 265 阅读 · 0 评论 -
React Native 的子组件向父组件传值的简单例子
目前只是找到了一组传值的方法基本原理是利用RN自带的TouchableOpacity组件中的callbackParent属性来实现上代码父组件代码/** * @flow *//* @flow *///只适用于一组图片的轮播效果/*import { Image, StatusBar, StyleSheet, Text, Tou原创 2017-04-24 15:03:14 · 899 阅读 · 1 评论 -
React Native ref高级用法&&setNativeProps使用
原文地址:http://blog.csdn.net/que_li/article/details/52872479ref属性不只是string ref属性不仅接受string类型的参数,而且它还接受一个function作为callback。这一特性让开发者对ref的使用更加灵活。render() { return (c) => this._input = c} />;转载 2017-05-05 19:25:40 · 326 阅读 · 0 评论 -
React native 的轮播图组件react-native-image-carousel的使用
1.Installationnpm install --save react-native-image-carousel注意点:需要先执行react-native init App,再在根目录下执行npm install --save react-native-image-carousel2.package.json文件如下原创 2017-04-12 18:24:07 · 2205 阅读 · 0 评论 -
React Native 之小技巧总结
1.当使用安卓模拟器无法 console.log的时候解决方法在 react-native run-android 的命令行中执行 react-native log-android打印效果如图:原创 2017-04-12 18:02:49 · 493 阅读 · 0 评论 -
React Native 项目常用第三方组件汇总:
React Native 项目常用第三方组件汇总:React-native-animatable 动画react-native-carousel 轮播react-native-countdown 倒计时react-native-device-info 设备信息react-native-fileu转载 2017-04-12 16:37:39 · 349 阅读 · 0 评论 -
React Native 的图片点击放大效果的组件使用 react-native-zoom-image
1.在index.android.js下书写/** * Created by TinySymphony on 2017-03-23. */import React, {Component} from 'react';import { StyleSheet, AppRegistry, View, Text, Easing, Scro转载 2017-04-13 15:06:39 · 7811 阅读 · 2 评论 -
React Native 之组件react-native-sound的使用
1.在项目根目录下执行安装包下载npm install react-native-sound --save2.然后自动使用链接:react-native link react-native-sound3.我自己是执行完以上两个步骤后查看了一下目录中相对的js配置文档,都是自动配置好的,但是以防意外,还是建议需要再核对一下编辑android/setting原创 2017-04-13 16:50:13 · 12564 阅读 · 4 评论 -
React Native 中的promise对象的踩坑之旅
原文地址:http://www.tuicool.com/articles/FvyQ3a感觉拯救了我的promise观谈谈使用promise时候的一些反模式原文 http://efe.baidu.com/blog/promises-anti-pattern/主题 Promise刘超凡 2015-07-24 JavaScript,promise转载 2017-04-20 16:11:14 · 1810 阅读 · 0 评论 -
react-native-storage
react-native-storage This is a local storage wrapper for both react-native(AsyncStorage) and browser(localStorage). ES6 syntax, promise for async load, fully tested with jest.查看中文文档请点击READM转载 2017-05-04 14:24:06 · 998 阅读 · 0 评论 -
React Native 之 ScrollView使用
版权声明:本文为博主原创文章,转载请注明出处!原文地址:http://blog.csdn.net/yeshaojian/article/details/53083553目录(?)[+]前言学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习本人接触 React Native 时间并转载 2017-05-05 17:53:29 · 505 阅读 · 0 评论 -
React Native 之 ScrollView的翻到顶部功能
先说明一下使用背景吧==>用ScrollView写的一个页面,页面底部有一个下一篇按钮,但是点击按钮重新render之后,页面依旧在底部,没有自动跳到顶部,视觉效果很差解决的方法是在ScrollView的标签中加入相当于类名的属性 ScrollView ref='totop'> View style={styles.container}>原创 2017-05-05 18:04:37 · 5026 阅读 · 0 评论 -
RN开源组件react-native-video的用法
最近做的一个RN项目,需要用到Video组件,首当其冲,自然就是react-native-video了。react-native-video:一个RN的Video组件 关于react-native-video的用法,其实npm官网上已经说的很清楚了,但对于初学者来说,可能还要踩一些坑,正好现在用到,记录下详细使用步骤吧。 IOS平台的用法很简单,就不多说,这里我只说下Android平台上的,...原创 2018-04-11 10:38:43 · 1919 阅读 · 0 评论