ReactNative前端开发者

文档版本0.0.2

Author: Necfol

说明: 本文档用于指导前端React Native的开发,如需开发其他其他框架应用,不适用本文档

前期准备

  1. ReactNative 的基本概念ReactNative文档
  2. es6 开发基本知识 es6 基本文档
  3. Node 环境(Node >=5.0.0,Yarn)下载地址
  4. Android Studio环境Android Studio
  5. Xcode 环境(Mac适用)

1、搭建脚手架

1.1、安装脚手架工具

通过 npm 安装 React Native 脚手架命令行工具

npm install -g yarn react-native-cli

1.2、初始化脚手架

由于官方RN0.45版本有问题,推荐使用0.44.3稳定版本

$ react-native init ${your_project} --template micrn --version 0.44.3

如果需要特定版本则:

$ react-native init ${your_project} --template micrn --version ${version}

如果需要最新版本则:

$ react-native init ${your_project} --template micrn --version

例如: react-native init test --template micrn --version 0.44.3

命令会在当前的文件夹下生成一个文件夹,这个文件夹就是我们的项目文件夹

2、 运行项目

1.进入上一步创建的文件夹,运行命令(初次运行此项目时需要输入)

node script/addDev.js

命令运行后,会去下载相关的dev依赖,并且替换包名称。这是由于React Native官方提供的构建模板生成工具不支持devDependencies,所以自定义devDependencies.json文件,项目生成之后,通过脚本把devDependencies.json中的依赖依次安装并且添加到package.json中;官方提供的构建模板生成工具也不支持自动在template构建的项目中替换应用名称,这个脚本也达到了自动替换应用名称的目的。
2.然后启动项目

ios(Mac环境): react-native run-ios
android: react-native run-android

安卓在运行项目之前,需要先打开Android Studio运行安卓模拟器!!!即AVD Manager. 安卓第一次运行的时候,命令行下载依赖可能比较慢,可以参考安装,通过Android Studio进行快速安装依赖。 项目启动在ios模拟器,或者安卓模拟器上,并且会打开命令行运行构建服务, ⚠️ 不能把进程杀掉! 可以通过chrome 安装调试工具,或者安装react-native-debugger,再或者React Developer Tools

3、项目基本结构

3.1、目录说明

my-project
├── __tests__
├── android //安卓工程项目
├── ios //ios工程项目
├── script //脚本文件存放处
├── src //项目源代码,开发人员编写的源代码都在这个目录下
│ └── action //redux中放置action的文件夹
│ │ └── home.js //home的action
│ │ └── type //存放action type的文件夹
│ └── components //页面级别的公用组件, 例如在某个项目里共同使用的用户信息展示, 某些共用的复杂弹窗等等
│ │ └── QRScan.js //二维码/条形码扫描
│ └── container //业务模块文件夹, 按照业务逻辑区分的业务模块文件夹
│ │ └── Home.js //首页
│ └── reducer //redux中放置reducer的文件夹
│ │ └── index.js //combine所有reducer
│ │ └── nav.js //navigation的reducer
│ │ └── home.js //home页面的reducer
│ └── app.js //入口
│ └── routerConfig.js //路由
│ └── configStore.js //redux中间件添加,调试工具配置
│ └── root.js //navigation根页面
├── .buckconfig
├── .flowconfig
├── .gitattributes
├── .npmignore
├── jsconfig.json
├── app.json
├── .babelrc //babel配置
├── .gitignore
├── README.md
├── index.android.js //android应用入口
├── index.ios.js //ios应用入口
├── package.json
├── yarn.lock

3.2、目录规范

  1. container 目录下有一个业务建一个子文件夹, 文件夹以驼峰命名, 其他文件也以驼峰命名
  2. components 目录下也分别建子文件夹, 文件夹以驼峰命名,其他文件也以驼峰命名

4、我要开发Template

如果我们想要开发或者更新Template该怎么办?
1.通过Template构建测试项目,在这个项目中开发您的代码
2.开发完之后,将测试项目所有的依赖正确添加到Template项目的dependencies.json和devDependencies.json中,如果需要增加测试页面,请将相关文件也拷贝到Template项目中, ⚠️ 一定要确认无误方可提交,并且发布。
3.更新package.json中的版本号,提交代码
4.命令行执行

npm publish

5.enjoy it

5、组件使用提示

  1. 扫一扫
    使用iOS 10或者更高版本时,需要在项目info.plist中增加相机使用权限,�该文件在'your_project/ios/your_project/Info.plist',请增加以下代码:
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string> <!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string> <!-- Include this only if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microsphone is accessed for the first time</string>
  1. 图片缓存

以下步骤在0.1.6及以上版本已经集成到addDev.js中,只需要在下载完跑脚本即可,可忽略

第一次使用图片缓存时需要运行

RNFB_ANDROID_PERMISSIONS=true react-native link react-native-fetch-blob

并且在项目android/app/src/AndroidManifest.xml中添加

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

之后使用图片缓存即可按照文档来react-native-cached-image

⚠️ 如果ios加载图片必须是https
⚠️ 对于安卓加载gif图片,需要在项目的/android/app/build.gradle的dependencies中添加

dependencies {
compile 'com.facebook.fresco:animated-base-support:0.14.1'
compile 'com.facebook.fresco:animated-gif:0.14.1'
}

之后重新运行 react-native run-android

ReactNative前端开发者的更多相关文章

  1. 14款让前端开发者心动的jQuery/CSS3插件及源码

    14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示    /    源码下载 2.jQuery QQ表情插件qqFace ...

  2. 最受Web前端开发者欢迎的五大开发工具

    工其事,必利于器.好的开发工具毋容置疑会帮助Web前端开发者事半功倍,51CTO在上期主办的技术沙龙<大型网站PHP开发之道> 对现场的百余位Web开发者做了问卷调查,后经51CTO调研小 ...

  3. 前端开发者应当了解的 Web 缓存知识

    缓存优点 通常所说的Web缓存指的是可以自动保存常见http请求副本的http设备.对于前端开发者来说,浏览器充当了重要角色.除此外常见的还有各种各样的代理服务器也可以做缓存.当Web请求到达缓存时, ...

  4. 前端开发者使用JS框架的三个等级

    目前前端开发者使用JS框架是种很普遍的现象,因为框架可以加快开发速度,同时避免各类浏览器的兼容性问题.不过同样是用框架开发,不同开发者的境界水平还是有一定差距,本文将这些前端开发者分为三个等级. 第一 ...

  5. 「前端开发者」如何把握住「微信小程序」这波红利?

    由于前两周一直在老家处理重要事情,虽然朋友圈被「微信小程序」刷爆了,但并没有时间深入了解. 昨天回广州之后,第一件事情就是把「微信小程序」相关的文章.开发文档.设计规范全部看了一遍,基本上明白了「微信 ...

  6. 参加IMWebConf 2017 前端开发者大会是什么体验?

    周六作为特邀讲师之一参加了IMWebConf 2017 前端开发者大会的主题演讲,主题为<WebAssembly:面向未来的web开发技术>.本次大会质量非常高,来自国内外的技术专家带了很 ...

  7. 一个前端开发者换电脑的过程(IDE篇)

    一台全新的电脑,需要做出怎样的改变,才可以摇身一变成为前端开发者能用的电脑呢.首先,我们需要安装一个编辑器,这里我们选择目前最火的vscode. 先去到它的官网,把对应版本的vscode下载下来. 然 ...

  8. 12个实用的 JavaScript 框架分享给前端开发者

    JavaScript库是预先编写的 JavaScript 工具代码,让开发者可以更容易开发 JavaScript 应用.这个列表我们列出了2017年1月份功能丰富的 JavaScript 库,可以帮助 ...

  9. 个人前端学习路线图与github优秀前端开发者的路线图推荐

    1.个人目前学习的路线图 2.github优秀前端开发者的路线图推荐 打开github首页,在搜索框输入developer-roadmap,搜索github前端路线图 选择kamranahmedse/ ...

随机推荐

  1. JavaScript 浮点数陷阱及解法

    众所周知,JavaScript 浮点数运算时经常遇到会 0.000000001 和 0.999999999 这样奇怪的结果,如 0.1+0.2=0.30000000000000004.1-0.9=0. ...

  2. java(8) HashMap源码

    系统环境: JDK1.7 HashMap的基本结构:数组 + 链表.主数组不存储实际的数据,存储的是链表首地址. 成员变量 //默认数组的初始化大小为16 static final int DEFAU ...

  3. 持续集成环境--Tomcat热部署导致线程泄漏

    一.问题由来 我们组用jenkins部署了持续集成环境,(jenkins部署war包到远程服务器的tomcat). 每次提交了代码,jenkins上一键构建,就可以自动拉取最新代码,打war包,热部署 ...

  4. Android MediaScanner

    一.MediaScanner 的使用 1)Intent.ACTION_MEDIA_SCANNER_SCAN_FILE:扫描指定文件 public void scanFileAsync(Context ...

  5. 记录一下使用Ubuntu16.0.4配置和使用docker registry

    h1, h2, h3, h4, h5, h6, p, blockquote { margin: 5px; padding: 5; } body { font-family: "Helveti ...

  6. Dockerfile的一些demo

    tomcat7.0_jdk1.6 #继承用户创建的sshd镜像FROM yatho:sshd_ubuntu #创建者的基本信息 MAINTAINER yatho (yat_ho@163.com) #设 ...

  7. [转]Android中attr自定义标签详解

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:wen= ...

  8. 【vue】vue.js安装教程/vue项目搭建

    前提:已安装nodejs——npm  (备注教程  “物理安装”  ) 第一步:建了一个managerSys文件夹,用于保存项目 第二步:从cmd进入该文件夹,之后开始安装vue.js相关 1)在该项 ...

  9. java基础/一个类A继承了类B,那么A就叫做B的派生类或子类,B就叫基类或超类。

    类重复,pulic class demo1 和class demo1 重复 无主类, 在cmd中输入命令: SET CLASSPATH=. (等号后为英文点符号),即可设置解释的路径为当前路径. 再次 ...

  10. Python中各种括号的区别、用途及使用方法

    python语言最常见的括号有三种,分别是:小括号( ).中括号[ ]和大括号也叫做花括号{ }.其作用也各不相同,分别用来代表不同的python基本内置数据类型. python中的小括号( ):代表 ...