【稀饭】react native 实战系列教程之项目初始化
来源:互联网 发布:网络歌手红唇橙子 编辑:程序博客网 时间:2024/04/29 04:11
项目前期准备工作
本系列课程实战,默认是你已经安装好react native所需的一切环境配置,如果你还没配置好,请事先看下中文官网。
这里提一下,如果你在安装Chocolatey过程中出错了,一般是权限问题,你需要以管理员的身份来启动cmd命令行,然后再执行安装即可。
本系列课程的开发环境:
- 系统:win10
- IDE:webstorm、sublime text 3、android studio
- 调试机:genymotion安卓模拟器、小米5
- React Native 0.31
后期做IOS适配的时候,会切换到mac系统环境。
创建项目
在F盘下创建一个目录,来存放项目代码,比如F:\Gray\ReactNative
然后打开命令行cd到这个路径的根路径下,执行命令
react-native init XiFan
XiFan 是项目名称,这个过程创建的时间比较长,要耐心等待。
在等待创建的过程,我们可以先把模拟器打开准备好,然后等命令成功执行完之后,cd到项目XiFan目录下,执行命令
react-native run-android
前提是需要电脑连接Android模拟器或者真机,可以调试。一开始运行可能不能正常运行,你需要配置下IP。
如果你是使用模拟器,那么可以使用Ctrl+M打开配置菜单,如果是真机可以按菜单键调出
这里说明几个有用到的选项
- Reload: 当你代码做出了修改并保存以后,可以直接Reload一下,应用就更新到最新代码的状态了。但是如果你项目新建了文件夹,添加了资源图片,可能reload就没效果了,此时要重新执行react-native run-android命令。
- Debug JS Remotely:这个选项会打开浏览器,可以进行js代码调试
- Dev Settings:用于开发环境的配置
这里我们要打开Dev Settings选项
选择下面的 Debug server host & port for device
填入你电脑的IP和端口号8081,需要注意的是,调试机和电脑必须在同一个局域网内,简单点就是,调试机和电脑链接同一个WiFi即可。
配置好后,在执行react-native run-android命令,就可以看到应用可以正常运行和显示了。
总结
到这里,项目的初始化任务就算完成了,本节只是完成了项目的创建,下一节开始项目的设计编码实现。
0 0
- 【稀饭】react native 实战系列教程之项目初始化
- 【稀饭】react native 实战系列教程之项目介绍
- 【稀饭】react native 实战系列教程之完成首页
- 【稀饭】react native 实战系列教程之自定义原生模块
- 【稀饭】react native 实战系列教程之数据存储
- 【稀饭】react native 系列教程之已有项目接入React Native
- 【稀饭】react native 系列教程之已有项目接入React Native
- 【稀饭】react native 实战系列教程之首页列表UI实现
- 【稀饭】react native 实战系列教程之影片数据获取并解析
- 【稀饭】react native 实战系列教程之Navigator实现页面跳转
- 【稀饭】react native 实战系列教程之自定义原生UI组件
- 【稀饭】react native 实战系列教程之热更新原理分析与实现
- [置顶] 【稀饭】react native 实战系列教程之热更新原理分析与实现
- react native 系列教程之已有项目接入React Native (转载)
- React-Native实战系列
- react native 之项目初始化一步到位
- React-Native 之 项目实战(一)
- React Native 之 项目实战(一)
- C# 关键字extern用法
- Unix网络编程之广播(一)
- Redis 简单启动操作
- hibernate.cfg.xml
- c++ builder 6 fatal:error detected Lme279
- 【稀饭】react native 实战系列教程之项目初始化
- # Ionic+Angularjs快速创建APP应用
- android5.1+获取当前运行的app(Android5.1-也支持)
- C中memcpy,strcpy,sprintf对一个字符数组赋值的效率
- kafka kafka-clients 0.10.0.0 API
- C#与C#接口对接,C#与Java的接口对接(序列化与反序列化)——(一)
- 某同学的性能测试的问题和答疑
- Mac OS X下Maven的安装与配置
- Xamarin提示Build-tools版本过老