zoukankan      html  css  js  c++  java
  • 01 React Native入门——环境安装部署

    简介

            此系列的文章主要是在学习React Native官网参考资料时整理的,因为官网写的主要是英文,而且有些操作步骤描述的并不是很详细,所以决定在此记录一下,为了后面工作开发时能进行快速开发,如果能帮助到刚入门的小伙伴,那就更开心了。

    安装部署所用软件及安装包

    • Node(高于8.3版本)
    • Python(必须为2.X)
    • jdk(版本必须为1.8)
    • Android Studio(默认最新版)

    安装部署操作步骤

    1、Node环境安装部署(高于8.3)

    1.1、打开地址“https://nodejs.org/en/download/”来下载相应版本的安装包,如下:

    1.2、安装过程略。一路点击Next即可,中间如果有需要的话更改下安装路径,其余的全部默认,但是在安装过程中有个地方需要注意:

            记得勾选上面框选中的选项,它会自动配置node的系统变量,安装完成后你无需自己配置。

    1.3、安装完成后打开命令行工具,输入以下命令测试:

    2、Python环境安装部署(2.X)

    2.1、打开地址“https://www.python.org/downloads/”下载相应安装包,然后双击安装,如图:

    2.2、安装过程略。同样的,期间也要勾选如图所示的选项,实现自动配置python路径(最下面一项):

    2.3、安装完成后,命令行通过以下命令进行测试:

    3、jdk环境安装部署(1.8版本)

    3.1、打开地址“https://www.oracle.com/technetwork/java/javase/downloads/index.html”来选择下载相应的安装包,如图:

    3.2、安装过程略。安装期间会弹出两次选择路径的界面,第一次是jdk的安装路径,第二次是jre的安装路径,可以自行选定,然后一路Next。

    3.3、安装完成之后我们进行java的环境部署,请参考文章“https://blog.csdn.net/qq_35117024/article/details/86085067”中的新建系统变量部分,部署完成后命令行输入以下命令进行测试:

    4、Android Studio安装部署

    4.1、打开地址“https://developer.android.com/studio/index.html”下载安装包,然后安装软件,安装路径中的文件夹名称不允许有空格。

    4.2、安装过程略。安装完成之后,选择运行此软件,第一次运行时会弹出配置界面,选择【cancel】,如图:

            然后选择定制安装,安装所需的组件,在此处确保安装以下的组件:

    •         Android SDK
    •         Android SDK Platform
    •         Performance (Intel ® HAXM) (AMD 处理器看这里)
    •         Android Virtual Device

            如图(此图并没有列出SDK Platform):

            安装配置完成后,我们在软件启动界面选择【Configure】,在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 9 (Pie)选项,确保勾选了下面这些组件(重申你必须使用稳定的翻墙工具,否则可能都看不到这个界面):

    • Android SDK Platform 28
    • Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

            然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

            最后点击"Apply"来下载和安装这些组件。

    4.3、配置环境变量

            添加系统环境变量,然后指定android sdk的安装路径,如图:

            然后在系统级变量“Path”中添加platform-tools的目录。

    5、新建第一个项目

    5.1、进入相应的文件夹,然后打开命令行工具,通过命令:

    react-native init myfirstapp

            来创建一个react native应用,然后我们进入到这个文件夹发现,在它里面有ios和android的两个文件夹,如图:

    5.2、通过Android Studio来打开这个android文件夹,然后在软件的右上角点击【AVD Manager】来创建一个虚拟设备,参数默认,如图:

    5.3、在新建的虚拟设备列表后面有个绿色的三角形,我们点击它来启动这个虚拟设备,如图:

    5.4、然后在命令行进入我们项目的根目录,通过命令:

    react-native run-android

            来启动,然后在虚拟设备就可以看到效果,如图:

    5.5、到此为止,我们介绍了React Native的开发环境部署及第一个实例的创建运行工作,后面继续介绍在真机中如何运行以及更多开发方法。

    总结

            本文从所需安装开始介绍,大致介绍了开发环境如何部署以及第一个demo的编写运行,其中Android Studio的安装部署部分介绍的可能不是很详细,因为在部署过程中并没有及时截屏,所以仅仅抓取了几张关键的图片,各位如果遇到问题,欢迎骚扰~

  • 相关阅读:
    Sprinig.net 双向绑定 Bidirectional data binding and data model management 和 UpdatePanel
    Memcached是什么
    Spring.net 网络示例 codeproject
    jquery.modalbox.show 插件
    UVA 639 Don't Get Rooked
    UVA 539 The Settlers of Catan
    UVA 301 Transportation
    UVA 331 Mapping the Swaps
    UVA 216 Getting in Line
    UVA 10344 23 out of 5
  • 原文地址:https://www.cnblogs.com/xuqw/p/11794611.html
Copyright © 2011-2022 走看看