babel-plugin-module-resolver 是一个Babel模块解析插件, 在.babelrc中可以配置模块的导入搜索路径. 为模块添加一个新的解析器.这个插件允许你添加新的"根"目录,这些目录包含你的模块.它还允许您设置一个自定义别名目录,具体的文件,甚至其他NPM模块. 使用指南 我们使用的目标要达到以下的使用效果 // 通常 import Mp from '../../p/MyPropTypes'; import MyUtilFn from '../../../..…

在使用react-native的时候,经常要自定义很多组件,但是只能使用../../../的方式,经常不记得这是多深,有没有一个插件,能自动帮我们解决这样的问题? 使用指南 我们使用的目标要达到以下的使用效果 // 通常 import SomeExample from '../../../some/example.js'; 或 const OtherExample = require('../../../other/example.js'); // 使用了 Babel-Root-Importer…

在使用react-native的时候,经常要自定义很多组件,但是只能使用../../../的方式,如果目录多了一长串,书写很烦,看着也不好看. 方法一: 例如你想引入utils里面的文件,不想../../../....,这样引入,而是想@utils/.....这样引入,那么你就可以在utils文件中放一个package.json,里面如下: { "name": "@utils" } 然后就可以引用了 import { connect } from '@utils/u…

自定义组件全局使用(类似如下) import { ReactNavComponent, Widget, Util } from 'rn-yunxi'; const { RegexpUtil, StorageUtil } = Util; const { Button, Text } = Widget; 首先在项目中文件下新建rn-yunxi文件夹, 然后再package.json文件中导入 “rn-yunxi”: “file:./rn-yunxi”, "dependencies": {…

React Native之本地文件系统访问组件react-native-fs的介绍与使用 一,需求分析 1,需要将图片保存到本地相册: 2,需要创建文件,并对其进行读写 删除操作. 二,简单介绍 react-native-fs支持以下功能(ios android): 将文本写入本地 txt 读取txt文件内容 在已有的txt上添加新的文本 删除文件 下载文件(图片.文件.视频.音频) 上传文件 only iOS 三,使用实例 3.1 将文本写入本地 txt let rnfsPath = Plat…

(六).React Native开源项目: 1.Pober Wong_17童鞋为gank.io做的纯React Native项目,开源地址:https://github.com/Bob1993/React-Native-Gank 2.聂风童鞋做的<都看影视>React Native项目,开源地址:https://github.com/changfuguo/doukanmv 3.大大做的<新闻阅读Reading>React Native项目,项目地址:http://www.lcode…

最近闲来无事,学习了React Native开发Android APP,自我感觉RN APP的效果和Native APP比还是蛮不错,以下是找到的一些优秀源码,仅供学习参考... React Native开源项目 1.Pober Wong_17童鞋为gank.io做的纯React Native项目,开源地址:https://github.com/Bob1993/React-Native-Gank2.聂风童鞋做的<都看影视>React Native项目,开源地址:https://github.c…

前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. Tab标签 什么是Tab标签?(ps:我是这样叫的),就拿微信来说吧,底部有4个选项卡,点击不同的按钮切换不同的内容. 在RN中有两个组件负责实现这样的效果,它们是: TabBarIOS TabNavigator TabBarIOS 和NavigatorIOS相似,看名字就知道该组件只适用于iOS…

前言 本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关. 如文中内容对您造成不便,烦请联系 277511806@qq.com 处理,谢谢. 转载麻烦注明出处,谢谢. 资料:链接: https://pan.baidu.com/s/1b3abwy 密码: k8p5 ES5转ES6 关于ES6语法,建议大家可以看下阮老师的 ECMAScriot 6 快速了解的话,大家可以参…

在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给我们的乐趣. 欢迎加入React Native讨论群:120663591 由于我也没怎么接触过js和css,所以就用自己的方式来学习,所以文章中有错误在所难免,如果您发现了错误,请及时在文章底下评论.我个人比较合适的学习方式是直接开发,遇到什么不会就去查,先把大概怎么写混熟,等到可以熟练写出程序之后…

),React Native技术交流4群(458982758),欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! Image是一个现实多种不同类型图片的React组件,能够进行载入网络图片,本地资源图片,打包的APP中的图片资源,以及磁盘比如:相冊中的图片. (二)Image基本使用方法 2.1.载入项目资源图片 从0.14版本号開始react native支持载入我们项目目录中的图片资源.我如今在測试项目中创建一…

学rn得朋友们,你们知道rn开源项目吗?来吧看这里:http://www.marno.cn/(rn开源项目) React Native学习之路(9) - 注册登录验证的实现 + (用Fetch实现post请求) + (倒计时验证码)+(父子组件通信)+(asyncStorage异步存储) +(TextInput文本输入框):http://www.jianshu.com/p/7c81e122276b ReactNative学习笔记七之图表组件交互(上):http://www.jianshu.com…

这次我们来填React Native生命周期的坑.这一点非常重要,需要有一个清晰的认识.如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容. 基本上一个React Native的组件会经历三个阶段最终渲染在界面上,他们分别是:开始渲染.更新.卸载. 开始渲染: componentWillMount componentWillMount(): void 组件开始渲染的时候调用这个方法 componentDidMount componentDidMount(): void 组件…

掌握了React Native的组件就可以使用IOS的原生组件和API. 一 View组件 就像开发web应用程序中,需要使用很多的HTML标签.例如 div,form.但是在基于DIV+CSS布局的web开发中,最为重要的元素就是 . DIV是页面布局的基础,是作为容器元素存在的.在React Native中,类似于HTML的DIV的组件就是 View组件. 1 View组件介绍 作为创建UI时最基础的组件,View是一个支持Flexbox布局.样式.一些触摸处理.和一些无障碍功能的容器,并且…

由于logo和启动屏尺寸多,react native(ios)中没有命令可以自动生成各种的尺寸,所以可以使用以下办法:在ionic项目中生成(使用命令:ionic resources)后,再粘贴到react native项目中. 一.ionic项目生成图标: 1.保证ionic和cordova的版本是最新的:使用ionic/cordova -v 查看版本 2.使用命令cordova platform version查看ios平台版本 3.安装ios版本最新的:ionic platform add…

学习任何技术,最快捷的方法就是学习完基础语法,然后模仿开源项目进行学习,React Native也不例外.React Native推出了1年多了, 开源项目太多了,我们以其中一个举例子.给大家演示下如何运行开源项目.(前提是你已经搭建好React Native环境了) 下载开源项目 首先需要找到开源项目 ,比如下面这个.地址: https://github.com/Bob1993/react-native-gank 进入github, clone到本地或者直接download到本地.按照之前运行…

),React Native技术交流4群(458982758).请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! ListView组件是React Native中一个比較核心的组件,用途很的广.该组件设计用来高效的展示垂直滚动的数据列表.最简单的API就是创建一个ListView.DataSource对象.同一时候给该对象传入一个简单的数据集合.而且使用数据源(data source)实例化一个Li…

这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示: 可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置的,这个组件本身就有一个属性是设置其大小的,两个选项,一大一小.这里顺便就介绍一些该组件的属性: animating:这个参数接受布尔型的值,表示是否显示加载指示器. color:string型参数,用来设置指示器的颜色,默认是灰色的,我们一般也不管他. hidesWhenStopped(仅iOS可…

),React Native技术交流4群(458982758)种 enabled  bool   android平台适用   用来设置下拉刷新功能是否可用 progressBackgroundColor ColorPropType  设置载入进度指示器的背景颜色 size RefreshLayoutConsts.SIZE.DEFAULT  android平台适用  载入进度指示器的尺寸大小 ,详细能够查看RefreshControl.SIZE(详细点击进入) tintColor ColorPro…

今天是肿么了......一上班创建React Native项目,react-native run-ios运行就报错,运行不了...呜呜...... 一开始以为自己react-native run-ios命令敲错,再然后以为Xcode缓存,再然后以为电脑问题,关机重启...问题依然存在,好在解决了.... 报错截图: 上网查了很多资料没有找到解决方案,估计是react-native版本的问题. 查看package.json文件: 发现是0.45.0版本...我记得之前都是0.44的版本的.....…

1.Main 目录下新建LaunchImage.js: /** * 启动页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; /*==============导入外部组件================*/ var Main = require('./Main'); // ES5 var Launch = R…

学习任何技术,最快捷的方法就是学习完基础语法,然后模仿开源项目进行学习,React Native也不例外.React Native推出了1年多了, 开源项目太多了,我们以其中一个举例子.给大家演示下如何运行开源项目.(前提是你已经搭建好React Native环境了) 下载开源项目 首先需要找到开源项目 ,比如下面这个. 地址: https://github.com/Bob1993/react-native-gank 进入github, clone到本地或者直接download到本地. 按照之前…

因为init项目的时候需要下载资源,但又因为react native的网站被墙所以下载很慢,解决方法就是换成淘宝的NPM镜像 我是直接使用了命令去替换了NPM $ npm install -g cnpm --registry=https://registry.npm.taobao.org 这样一来,就会快很多了,实测,大概3分钟. 淘宝NPM地址:https://npm.taobao.org 如有错误,恳请指出.…

React Native版本:0.60.4 解决方法: cd ios pod deintegrate pod install 然后重新启动就好了(示例页面变样了( ⊙ o ⊙ )) END----------------------------…

1.Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, Platform, //判断当前运行的系统 } from 'react-native'; /*=============导入外部组件类==============*/ import TabNavigator from 'react-native-tab-navigator'; import…

1.安装插件,cd到项目根目录下执行: $ npm i react-native-tab-navigator --save 2.主框架文件Main.js /** * 主页面 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, Platform //判断当前运行的系统 } from 'react-native'; /*=============导入外部组件…

1.创建项目 $ react-native init BuyDemo 2.导入图片资源 安卓:把文件夹放到/android/app/src/main/res/目录下,如图: iOS: Xcode打开工程,把图片拖动到Images.xcassets里 3.根据实际需求,组织项目结构,目的是更加清晰 4.Main.js /** * 主页面 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te…

1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity, TextInput, Image, Platform } from 'react-native'; var Dimensions = require('Dimensions'); var screenW = Dimensions.get('wi…

1.在Home目录下新建首页详细页HomeDetail.js /** * 首页详情页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity } from 'react-native'; // ES5 var HomeDetail = React.createClass({ render() { return ( <View style=…

运行项目有两种方法 1. 到根目录,执行 react-native run-ios 命令 会开启一个本地服务,加载jsbundle文件,然后是去index.js文件 import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); //展示A…