学习使用React Native的心得体会
首先根据官网上的介绍,安装必须的环境需求。http://reactnative.cn/docs/0.20/getting-started.html#content
下面讲一下一些常用的命令:
.下载npm运行环境的react-native依赖库(node_modules) $ npm install
2. 安装全局的react-native-cli命令
$ npm install -g react-native-cli
3.初始化iOS项目,(根据个人选择是否需求) $ react-native init AwesomeProject
如果需要手动开启开发服务器,那么就需要添加一个package.json到node_modules的同级目录下,如图
package.json内容如下:
添加了package.json后,只要在该文件目录下通过命令行执行 $ npm start ,就可以启动开发服务器了。
下面来讲讲如何生成jsbundle文件,还是在该根目录下,把需要生成jsbundle的js文件或者是存放js文件的文件拷贝到该根目录下,记得不要关闭开发服务器。然后另外打开一个终端,cd到该
根目录下,执行
$ curl http://localhost:8081/index.ios.bundle -o main.jsbundle
如果js文件在某个文件下,就应该这样执行
$ curl http://localhost:8081/ReactComponent/index.ios.bundle -o ReactComponent/main.jsbundle
这样就将指定文件夹下的js文件生成为了指定文件夹下的jsbundle文件了。
如果上面的不行,则试一下下面的命令:
需要在项目根目录下执行 react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./bundles/main.jsbundle 或
react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output ./bundles/main.jsbundle
实在不行,还可以试试这条命令:
/**
* OPTION 2
* Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
* to your Xcode project folder in the terminal, and run
*
* $ curl 'http://localhost:8081/Examples/2048/Game2048.bundle?platform=ios' -o main.jsbundle
*
* then add the `main.jsbundle` file to your project and uncomment this line:
*/
如果想要把图片资源一起打包进bundle,则需要使用一下命令:
react-native bundle --entry-file index.ios.js --bundle-output ./bundle/main.jsbundle --platform ios --assets-dest ./bundle --dev false 或(需要文件夹) react-native bundle --entry-file index.ios.js --bundle-output ./bundle/localBundle/main.jsbundle --platform ios --assets-dest ./bundle/localBundle --dev false
文件目录如图:
然后在xcode中添加assets【必须用Create folder references的方式,添加完是蓝色文件夹图标】和index.ios.jsbundle。
如果不希望显示状态栏的调试菜单,只要将scheme中的archive模式设置成release。
另外,手动链接react-native库的话,一定要记得添加查找头文件的路径,否则Xcode会报错找不到头文件。但是,即便如此,手动链接库在运行项目的时候还是会报一些错误。
还有,当服务器报了这个错误的时候,应当按照提示找到该目录下的文件,并且删除。
操作如下:
由于手动链接库会出各种错误,所以,我一般使用cocoapods的链接库方式。但是,用这种方式运行项目前,一定要记得在项目根目录下手动启动开发服务器。
启动开发服务器
$ npm start
或
$ react-native start
现在已经找到手动链接库报错的原因,这是最坑人的地方,一定要看。
有时候也会因为添加了这个-ObjC而报错!!!
添加依赖库
自动依赖库命令:提供原生依赖的自动链接。即不需要手动链接依赖到项目中。
rnpm link react-native-video
初始化一个项目后,可以根据终端的提示命令打开运行项目,如图:
使用真机进行调试,需要控制台查看console的时候,需要修改本地IP地址。如图:
添加开发依赖库:
npm install --save-dev reactotron-react-native
Flow工具:FaceBook自家出品的一个js类型检查器。
使用方法,在项目目录终端下输入:$ flow check
使用其它的浏览来进行调试,输入地址:http://localhost:8081/debugger-ui
不过,还是推荐用google浏览器来调试比较好。
学习使用React Native的心得体会的更多相关文章
- React Native调试心得
在做React Native开发时,少不了的需要对React Native程序进行调试.调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率.本文将向大家分享React Na ...
- 关于学习js的Promise的心得体会
最近一直在研究js的Promise对象,其中有一篇blog写得比较通俗易懂,转发如下: http://www.cnblogs.com/lvdabao/p/es6-promise-1.html 参照上面 ...
- 为什么学习React Native三点原因
React Native不到两岁,兼容Android平台刚刚1年.我学习React Native其实也就不到1年,不算长,也不算短. Paul Graham在文章中写过:大多数人真正注意到你的时候,不 ...
- React Native 从入门到原理
React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...
- 关于React Native 火热的话题,从入门到原理
本文授权转载,作者:bestswifter(简书) React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原 ...
- 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- React Native 从入门到原理一
React Native 从入门到原理一 React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却 ...
- React Native 简介:用 JavaScript 搭建 iOS 应用 (1)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- React Native专题
转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...
随机推荐
- ajax 数据回传
response.getWriter().print(reval > 0 ? true : false); //=========================== Object[] str ...
- CentOS DNS resolv重启无效的解决方法
分类: LINUX 直接修改/etc/resolv.conf不行.必须要在/etc/sysconfig/network-scripts/ifcfg-eth0里面最后 加上dns的设置.要不然,重启后, ...
- 转载:10 Easy Steps to a Complete Understanding of SQL
10 Easy Steps to a Complete Understanding of SQL 原文地址:http://tech.pro/tutorial/1555/10-easy-steps-to ...
- 有趣的keil MDK细节
1.MDK中的char类型的取值范围是? 在MDK中,默认情况下,char 类型的数据项是无符号的,所以它的取值范围是0-255.它们可以显式地声明为signed char 或 unsigned.因此 ...
- poj3094---对字符串的处理
#include <stdio.h> #include <stdlib.h> #include<string.h> int main() { ]; int len, ...
- jQuery插件
1. Lightbox 2: Lightbox 2 是一款很酷的图片显示插件,可以在一个平滑展开的新窗口中展现出图片,而同时页面的其余部分都变成黑色背景.使用这款插件,是为了当你的的图片过大必须 ...
- 机房收费系统之vb报表的模板的制作(一)
机房收费系统有报表的功能,报表对于我们来说有点陌生.这不是会计的事吗?怎么机房收费系统也參合进来了,事实上我们学会了报表的步骤.理解了代码后.报表变得不是非常难,世上无难事,仅仅怕肯登攀 ...
- list 去重复
两层遍历,如果后面的元素和前面的相同,就把后面的删除,达到去重复的目的. 比较的元素可以是list中含有的任意唯一性的元素. for(int x = 0;x < xglist.size()-1; ...
- VS中,无法嵌入互操作类型“……”,请改用适用的接口的解决方法
最近使用VS,在引用COM组件的时候,出现了无法嵌入互操作类型“……”,请改用适用的接口的错误提示.查阅资料,找到解决方案,记录如下: 选中项目中引入的dll,鼠标右键,选择属性,把“嵌入互操作类型” ...
- Oracle的完整练习,纯手工打字,可能有一两点错误。。。
PS:所有的表来源于Oracle自带的SCOTT用户下的表,初学者应该都知道的.emp表的SMITH被我删除了没有rollback,所以可能结果有点小出入. 1.选择部门30中的所有员工: SELEC ...