react native 开发笔记（一）

1、准备工作：
（1）安装node.js程序
（2）安装android-studio程序（项目第一次加载需要
androidSDK）
（3）java环境的配置（百度）
（4）需要一个安卓程序模拟器，我用的天天模拟器
（5）windows下需要powershell工具来执行命令：
开始–》输入框搜索powershell–》进入powershell
–》执行一些命令
具体的参考这位小兄弟的有道云笔记：
http://note.youdao.com/noteshareid=a7369a5e29b3c35a614122b784bde274&
sub=7F51676BBE4545A79DBB15277C5E1EEC

特别注意：JAVA,node.js,ANDROID_HOME的环境变量一定要引入好，

不然后面会很麻烦。一直报错。

2、如果一切安装就绪的话，进入你想要生成项目的文件，在powershell中输入：
（1）安装React-native-cli
npm install -g react-native-cli
（2）初始化项目
react-native init 项目名称
这个过程可能比较久，主要就是生成一个基本的项目目录结构
具体的，可以参考下面这位大神的博客：http://blog.csdn.net/itpinpai/article/details/50809068

3、进入项目文件夹下，进行本地初始化react native环境之后，需要打开windows的powershell工具，输入npm start或者react native start命令来开启服务。
如果报错：没有npm start 则需要先进行 “npm install’ 安装npm服务

4、例如：下载天天模拟器，用来在电脑上运行我们的apk文件。
如何把天天模拟器和你的项目结合到一起？
答：在天天模拟器上打开你的apk文件—-》点击菜单—》在英文选项中选择—-》Dev Settings—–>Debug server host & port for device—->然后会出来个输入框—》输入本机IP+端口号8081（如：123448:8081）—>reloading即可

5、页面运行步骤：全局配置–》设置路由（注册APP）–》根据路由写界面–》引入组件，引入CSS–》输出页面

6、在RN中全部都是’.js’后缀的文件，包括样式文件。样式的命名需要按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

7、关于flex布局的问题：
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。
请参考阮一峰老师的博客：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

8、实现热更新的效果：模拟器菜单–》选择第四个（Enable Hot Reloading），然后重新打开apk文件即可。

9、RN的组件都是需要从网上下载的。正常来说，我们通过npm start打开服务器之后，直接用npm下载即可。常用的组件，例如按钮，滚动等，都是可以直接下载的。下载组件的命令是：
npm install 组件名称 –save 解释：安装的同时，将信息写入package.json中

10、如果需要在浏览器上通过控制台调试的话，步骤如下：
打开天天模拟器—》选择–》Debug JS Remotely
然后你的浏览器就会打开了，F12查看控制台即可。（chrome）

end
第一篇写的零零碎碎的，还是第二篇上代码更直接一些。初学RN，多多包涵。

react native 开发笔记（一）相关推荐

react native 开发笔记（二）
1.按照前文配置好文件之后,便可以生成目录 (1)按照小兄弟的步骤生成项目:react-native init name (2)目录结构 index.ios.js和index.android.js为入 ...
React Native学习笔记一之搭建开发环境
因为项目需要,今天开始正式学习React Native,先来搭建个开发环境忐忑的心情因为项目比较急,而且客户要求使用React Native开发,只能先学点基础然后在项目中使用的时候,边做边学了, ...
React Native开发错误警告处理总结（已解决！持续更新）
注:本文是我在开发过程中遇到问题解决方法的总结,之后会持续更新,希望帮助到更多的学习者.文中有不妥的地方希望指出共同学习,同时欢迎大神补充.(之后我会放出自己开发整理的笔记和GithubDemo地址, ...
【转】【React Native开发】
[React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19) [React Native开发]React Native控件之Touchable*系列组 ...
windows 下配置 react native 开发环境
windows 下配置 react native 开发环境安装nvm 由于react native 需要使用 NodeJs 4.0以上版本,为了方便切换NodeJs,首先我们需要安装nvm. 你可以 ...
React Native开发之必备React基础
为了帮助大家快速上手React Native开发,在这本节中将向大家介绍开发React Native所需要的一些React必备基础知识. 概述本节课将从React的特点.如何使用React.JSX语 ...
Windows环境下安装React Native开发环境----记一次填坑过程
前言集成React Native开发环境遇到各个坑,调试了很久出现过找不到设备,百度上个别人的资料有误被绕来绕去耽误了很多时间,下载慢等待时间过长等问题,最后多方查阅资料,电脑重启等操作终于部署好了 ...
iOS新知识学习之React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...
React Native开发之——Webstorm开发RN配置
前言前文React Native开发之--Webstorm快捷开发介绍了使用Webstorm快捷开发React Native, 本文介绍Webstorm开发RN配置. Webstorm开发RN配置 ...

react native 开发笔记（一）

react native 开发笔记（一）相关推荐

最新文章

热门文章