博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React Native 初探---环境配置和运行第一个App
阅读量:6234 次
发布时间:2019-06-21

本文共 1821 字,大约阅读时间需要 6 分钟。

hot3.png

环境配置:(针对android)

  1. 安装node.js  配置国内镜像  安装react native的命令行
  2. 安装java8或以上
  3. 安装Android studio 并且sdk 中的Android版本必须有23.0.1
  4. 初始化我们的第一个reactNative项目

第一步:

    从node.js官网下载对应的安装包

231709_9DWs_2978666.png

下载好一路安装就行。验证是否安装成功win+R 输入cmd 打开终端,按如图所示输入验证

231914_WuK5_2978666.png

接下来就是安装React Native 的命令行工具 :

安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!

npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global

Yarn、React Native的命令行工具(react-native-cli)

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

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源:

yarn config set registry https://registry.npm.taobao.org --globalyarn config set disturl https://npm.taobao.org/dist --global

具体截图如下:

 232423_WLE0_2978666.png

到这里,我们第一步就完成了,第二步是为了安装APP而准备的运行环境 java和sdk

第二步:

下载java8或以上(必须是8 或以上)一路默认安装就行。安装android studio 之后看这个图

platforms

在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1(必须是这个版本)。然后还要勾选最底部的Android Support Repository.(最好是关于23.0.1的都下载下来)

ANDROID_HOME环境变量:

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建

具体的路径可能和下图不一致,请自行确认。

env variable

你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。

android Sdk环境和tool:

你可以把Android SDK的tools和platform-tools目录添加到PATH变量中,以便在终端中运行一些Android工具,例如android avd或是adb logcat等。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 选中PATH -> 双击进行编辑

注意你的具体路径可能和下图不同

env variable

第三步:

创建我们第一个的reactNative应用:(test就是你要创建的工程名)

233648_6wUm_2978666.png

接下来,你就是需要等待了,可能要几分钟,知道出现如图:

233828_dPdI_2978666.png

此图代表创建项目成功,接下来就是要在项目的目录下运行工程

233931_uISk_2978666.png

运行app需要手机或模拟器,先看看有没有连接上,输入(adb devices)

234059_rhah_2978666.png

此时已经有机子可以测试了,用命令去运行工程  react-native run-android,在运行时会启动包管理服务器,需要重启只需要在终端输入:react-native start 。(可能会出现安装不成功,如果是以下如图原因,最好换个手机或模拟器。)

235119_iKcV_2978666.png

这里还要提醒一下:在手机系统5.0以上需要输入:adb reverse tcp:8081 tcp:8081。这样App才能访问到包服务器资源。5.0以下需要在应用下设置路由并同一个wifi(很麻烦)建议采用5.0以上

 

 

, 

转载于:https://my.oschina.net/huangzhi1bo/blog/871226

你可能感兴趣的文章
python 内嵌模块——time
查看>>
关于form与表单操作
查看>>
网络协议
查看>>
同源策略
查看>>
Date——时间戳转化为YYYY-MM-DD h:m:s时间格式
查看>>
MySQL_PHP学习笔记_2015_0907_PHP用pdo连接数据库时报错 could not find driver
查看>>
字符类型
查看>>
Algs4-1.1.5位于0与1之间则打印true,否则打印false
查看>>
分布式存储 FastDFS-5.0.5线上搭建
查看>>
[Java 基础]ResultSet 指定field映射到Pojo对象的Map
查看>>
Oracle 11g OCM 考试大纲
查看>>
华为 题目大数据计算器
查看>>
学会了怎么推矩阵啊哈哈哈哈哈
查看>>
web开篇
查看>>
day7CSS
查看>>
android中延迟执行某个任务
查看>>
蒲公英分布平台下载更新实现
查看>>
Mysql常用命令详解
查看>>
依赖注入的方式
查看>>
从VBA到Delphi
查看>>