React Native基础与入门

前端之家收集整理的这篇文章主要介绍了React Native基础与入门前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

什么是React Native?

React Native是Facebook开源的一套用于开发移动端跨平台App的技术框架,其代码托管在GitHub上,目前已有一千多名参与者向它贡献代码。有兴趣的可以去查看源码,GitHub地址为:

https://github.com/facebook/react-native

Window平台搭建React Native开发环境

需要安装的工具

Note.js

React Native Command Line

Android Studio/Xcode

安装Note.js

首先去Note.js官网,下载对应的安装包https://nodejs.org/en/,安装完成后,打开CMD终端:


安装React Native Command Line

npm install -g react-native-cli 该过程需要漫长的等待,请耐心


React Native命令行工具安装成功后,我们可以通过react-native --help来查看支持的所有命令


安装Android Studio/Xcode

这里不作详细的介绍,相信每个移动端开发者都可以做到!

创建第一个React Native应用

react-native init FirstApp(项目名称)


由于该过程会去npm服务器上下载项目中依赖的工具,npm服务器在国外,导致该过程花费的时间较长。在这里我们可以设置一个淘宝的npm镜像服务器,这样访问的速度会大大提高。

注:下图中的目录为Note.js的安装目录


初始化完成之后,就可以看到下面的界面:


然后我们打开FirstApp项目的根目录会看到如下项目结构:


运行React Native项目

首先保证必须有手机或者模拟机连接电脑

方法1:通过命令行启动应用

切换到项目的根目录,react-native run-android

这个命令会启动js服务器,如下图:


终于看到第一个错了:


意思很清楚,我忘了配置ANDROID_HOME环境变量,配置完成后,记得重启终端哦!

再次运行,终于成功啦!


方法2:通过Android Studio方法启动应用

React Native项目的根目录中有个android目录,直接导入就行。

Ctrl + M 可以打开开发者菜单

猜你在找的React相关文章