React Native 学习笔记（一）--init 项目和运行项目

最新推荐文章于 2025-06-17 15:50:50 发布

uana_777

最新推荐文章于 2025-06-17 15:50:50 发布

阅读量7.2k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/uana_777/article/details/53392571

本文档详细介绍了在Windows环境下配置ReactNative开发环境的过程及注意事项，包括如何解决兼容性问题，以及通过具体步骤演示如何创建并运行ReactNative项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

声明：此篇blog是在Windows环境下开发Android项目的学习笔记，最近也是在网上翻找资料发现，网上的资源基本上都是Mac环境下的，而且大部分的资料都是关于React Native + Web / Service 的，关于android的学习资源不多，因此也就想通过这段的空余时间来学习和整理一下React Native + Android 的学习。由于React Native 毕竟也是基于JavaScript的，所以其实会了React Native + * 其实也就基本上在别的平台上的使用到的js你也就会了。当然以上只是我现在自己对React Native的体会，可能会有不足或者错误的地方，希望大家多多指正！

Part One

首先，学习React Native首要的条件就是要有环境，至于怎么配置React Native大家可以在官网上按照步骤安装。不同的平台安装的步骤和需要的软件也不同，我这边是Windows环境（这里不说什么系统好，也不说哪一个系统差）。官网首页有下面的一段描述：

中文版：

最专业的翻译，最及时的资讯，最火爆的社区

使用前沿的JAVASCRIPT为IOS、ANDROID编写跨平台原生APP

React Native使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。

React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)

Facebook已经在多项产品中使用了React Native，并且将持续地投入建设React Native。

英文版：

React Native

LEARN ONCE, WRITE ANYWHERE: BUILD MOBILE APPS WITH REACT

Get started with React Native

当然目前的版本是0.38 。我学习的时候是0.37版本，这里记录一下。

通过上面的介绍，得到一句话：React Native 很牛逼！（特么，这要是大规模使用，android和ios的攻城狮可怎么活？？？）

关于React Native 官网中关于配置开发环境的视频主要是Mac环境下的，Mac环境下的相比Windows环境配置起来无比简单。比如Nodejs最新的版本（当前是7.0.1）在windows环境上不兼容，Python3 现在不被React Native支持等一系列问题。

上面说了，我使用的是Window 环境。在安装配置React Native 环境的时候遇见的坑和安装过程中使用的Windows包管理器Chocolatey遇见的问题和解决方案已经在上一篇博客中说了，想学的朋友配置环境的时候如果有什么问题可以借鉴一下：http://blog.youkuaiyun.com/uana_777/article/details/53305774

行！

Part Two

废话就说到这：下面我们开始说点干的：

当我们配置好了环境之后，运行示例程序步骤如下：

第一步，创建project （这个命令会创建一个项目，包含ios的项目在内）

比如在F盘下创建一个文件夹名称叫：ReactNativeDemos，进入这个文件夹，打开命令行工具，输入下面的命令后回车：

	react-native init 你的工程名称

比如我们输入：react-native init MyProject ，回车稍等一会初始化完成后我们会得到如下的一个工程目录：

第二步，出现上面的工程目录后，我们进入工程目录，继续操作：

	输入如下命令行：
	cd MyProject 
	react-native run-android

注：如果输入上面的命令后，程序执行报Error多半是因为端口8081不能使用造成的，这时我们可以使用手动的方法去开启Packager：

通过命令：react-native start

第三步，运行结束后如果App出现红屏，不必惊慌，这说明我们的程序运行已经成功了，只需要按照下面的操作我们就能看到首界面了：

1. 确保电脑和手机设备是在同一网络环境下（也即是连在同一个WiFi下即可）

2.我这里使用的是真机测试，所以我点击Menu键或者运行命令：adb shell input keyevent 82

3.完成第2步后，屏幕上会显示一个选择列表，我们点击Dev Settings

4.再点击Debug server host for device (android应用中是 Debug server host & port for device)

5.在输入框中输入你的电脑当前的ip（通过命令 ipconfig）和端口号8081 格式：10.0.1.1:8081

6.点击返回键，推后至最初的红屏界面，点击Menu键或运行命令，点击 Reload JS 即可。

最后，到这里我们就运行了我们第一个React Native项目

注：如果我们在运行安装到真机上的时候，出现registe 失败的情况，多半也是因为端口被占用，我们可以把相关的cmd关闭，把占用8081端口的服务关闭，重新执行第三步即可。

Part Four

资料：

这里是React Native 的官网：

英文网址：https://facebook.github.io/react-native/

中文网址：http://reactnative.cn/