【稀饭】react native 实战系列教程之项目初始化

2024-05-29 03:00:07

项目前期准备工作

本系列课程实战，默认是你已经安装好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命令，就可以看到应用可以正常运行和显示了。

总结

到这里，项目的初始化任务就算完成了，本节只是完成了项目的创建，下一节开始项目的设计编码实现。

【稀饭】react native 实战系列教程之项目初始化相关推荐

【稀饭】react native 实战系列教程之首页列表UI实现
首页设计与实现首先,这章节讲的是首页内容的设计与实现,不包括主界面的设计,因为一开始入手,我希望能立马获取到数据并能展示出来,后面再来搭木积似的一步一步把整体框架做起来. 设计 (图丑,莫见怪~) ...
【稀饭】react native 实战系列教程之完成首页
首页功能前面,我们已经完成了影视信息组件的开发,接下来,我们要用该组件来完成首页界面功能的开发,如下图可以看到,首页顶部一个标题栏,下面是'最新'.'最热'两个选项卡.我们要完成的有标题栏.选项卡 ...
【稀饭】react native 实战系列教程之自定义原生模块
影片详情开发也是通过Cheerio抓取并分析网页获取到的详情数据,本节就不作为详细内容来讲解了,详细的代码可以看下我的github,效果如下: 在点击播放时,会跳转到播放界面,并且横屏显示,退出播放界 ...
[置顶] 【稀饭】react native 实战系列教程之热更新原理分析与实现
很多人在技术选型的时候,会选择RN是因为它具有热更新,而且这是它的一个特性,所以实现起来会相对比较简单,不像原生那样,原生的热更新是一个大工程.那就目前来看,RN的热更新方案已有的,有微软的CodeP ...
react native 实战系列教程之热更新原理分析与实现
很多人在技术选型的时候,会选择RN是因为它具有热更新,而且这是它的一个特性,所以实现起来会相对比较简单,不像原生那样,原生的热更新是一个大工程.那就目前来看,RN的热更新方案已有的,有微软的CodeP ...
菜鸟窝Android百度云视频,菜鸟窝React Native 视频系列教程
菜鸟窝React Native 视频系列教程交流QQ群:276960232 Hi,我是RichardCao,现任新美大酒店旅游事业群的Android Developer.15年加入饿了么即时配送BU ...
【稀饭】react native 实战系列教程之Navigator实现页面跳转
主界面开发上一节,我们已经完成了首页的开发,现在,我们继续完成主界面的开发,就是添加底部'首页'和'我的'两个tabbar. 在js/文件夹下,新建MainScene.js文件 import Rea ...
【Youtobe trydjango】Django2.2教程和React实战系列一【项目简介 | 搭建 | 工具】
[Youtobe trydjango]Django2.2教程和React实战系列一[项目简介 | 搭建 | 工具] 1.环境与选型说明 2.技术栈选型说明 3.django搭建详解 3.1. 项目虚拟 ...
基于 mapboxgl+threejs+react+ts 三维 webgis 实战系列教程
全网唯一基于 mapboxgl+threejs+react+ts 的三维 webgis 实战系列教程: 后续将分享一些下面的功能: 基本项目搭建: threejs + mapboxgl 版 Hel ...
手把手教React Native实战开发视频教程干货
手把手教React Native实战开发视频教程[更新到70集啦...] ================================ 由于360云盘关闭,作者已经将资源迁移.需要的朋友请访问一下 ...

最新文章

热门文章