2.React Native环境搭建和创建第一个程序Hello World;

目录

 

1.首先整理一些React Native项目环境搭建

1.1先了解一下几个概念

1.2实际开放环境的搭建

2.创建我们的第一个项目Hello World

2.1创建HelloWorld项目项目

2.2运行项目

2.2.1IOS运行

2.2.2Android设备运行

3.React Native开发工具说明

3.1WebStorm下载和激活

3.2WebSotrm运行React Native项目和代码自动提示配置

4.RN项目Hello World修改运行

5.RN项目运行常用命令


1.首先整理一些React Native项目环境搭建

1.1先了解一下几个概念

Node是什么?

Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js 不是一个 JavaScript 框架,不同于CakePHP、Django、Rails。Node.js 更不是浏览器端的库,不能与 jQuery、ExtJS 相提并论。Node.js 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。 [1] 
Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。 [2]  Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。

Watchman是什么?

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。

Yarn是什么?

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。(备注:Yarn是非必须要安装,可以使用npm)

Xcode是什么?

Xcode是一款在苹果设备上开发IOS相关的开发工具,若项目开发需要运行在IPHONE设备上需要安装次开发工具;

Android Studio是什么?

Android Studio是一款开发Android相关的开发工具,若项目开发需要运行在Android设备上需要安装次开发工具;

1.2实际开放环境的搭建

参考React Native中文官网:https://reactnative.cn/docs/getting-started.html

参考React Native英文官网:https://facebook.github.io/react-native/docs/getting-started

进入中文官网地址切换你选择你的开发环境配置要求,将告诉你如何安装开发环境,我就不重复造车了;

2.创建我们的第一个项目Hello World

2.1创建HelloWorld项目项目

进入命令行窗口执行react-native init HelloWorld命令创建HelloWorld项目,我们会看到在当前目录下第一个HelloWorld项目已经创建好了;(备注:不管和开发IOS项目还是Android项目只需要执行这条命令行即可:

创建工程如下:

2.React Native环境搭建和创建第一个程序Hello World;_第1张图片

2.2运行项目

执行命令cd HelloWorld进入项目目录;

2.2.1IOS运行

在控制台下运行IOS项目在项目目录执行react-native run-ios命令;

2.React Native环境搭建和创建第一个程序Hello World;_第2张图片

我们会发现项目已经安装运行到IOS设备上,一个是IOS模拟器,一个是监控窗口;

2.2.2Android设备运行

在控制台下运行Android项目在项目目录执行react-native run-android命令;

直接执行运行安装Android设备时会出现如下错误提示:

由于我们没有连接Android手机或者启动模拟器,我们可以借助Android Studio启动一个模拟器;

BUILD FAILED in 10s
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html

如下错误是由于我们HelloWorld项目下没有配置sdk的关联目录

* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

解决办法就是在Hello World/android目录下添加一个local.properties文件,同时配置sdk位置配置内容如下,把下面的内容粘贴到local.properties文件中;

## This file is automatically generated by Android Studio.
# Do not modify this file -- YOUR CHANGES WILL BE ERASED!
#
# This file should *NOT* be checked into Version Control Systems,
# as it contains information specific to your local configuration.
#
# Location of the SDK. This is only used by Gradle.
# For customization when using a Version Control System, please read the
# header note.
sdk.dir = /Users/fandong/Library/Android/sdk

注意:sdk.dir目录要配置你自己实际的sdk目录哈
2.React Native环境搭建和创建第一个程序Hello World;_第3张图片

3.React Native开发工具说明

IOS开发工具可以使用Xcode或者Nuclide(官网推荐的)

Android开发工具可以使用Android Studio或者Nuclide(官网推荐的)

我实际开发使用的WebStorm

3.1WebStorm下载和激活


激活地址
https://blog.csdn.net/voke_/article/details/76418116
获取激活码
http://idea.lanyus.com/

3.2WebSotrm运行React Native项目和代码自动提示配置

WebStorm如何运行RN项目
https://www.jianshu.com/p/84fa658f2baa
WebStrom的代码自动提示配置
https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

以上是我前期开发整理的,实际有什么问题,请留言交流;

4.RN项目Hello World修改运行

通过Sublime Text打开HelloWorld项目下的App.js文件做一些文字的简单修改,在Android模拟器下双击R我们会发现项目的页面自动更新了,不需要重新运行项目;

2.React Native环境搭建和创建第一个程序Hello World;_第4张图片

5.RN项目运行常用命令

项目创建

react-native init HelloWorld

IOS项目运行

react-native run-ios

Android项目运行

react-native run-android

Android项目自动更新修改界面

双击R

Android项目打开调试页面和配置

⌘-M

2.React Native环境搭建和创建第一个程序Hello World;_第5张图片

IOS项目界面自动刷行

⌘-R

后续补充

参考:

开发常用参考信息收集,后续不断补充

Node百度百科:https://baike.baidu.com/item/node.js/7567977

React Native中文网:https://reactnative.cn/docs/getting-started.html

 

你可能感兴趣的:(React,Native,Android拓展,IOS拓展,React,Native,环境搭建,IOS,Android)