react-native入门学习( 一 )
开发环境配置
因为个人电脑是windows7环境,所以在选择安装react-native 环境的时候是用的 windows+android
react-native中文网文档地址 https://reactnative.cn/docs/0.51/getting-started.html#content
1.安装node环境(省略....)
2.安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!
npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global
3.安装Yarn
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli
安装完yarn后同理也要设置镜像源:
yarn config set registry https://registry.npm.taobao.org --global yarn config set disturl https://npm.taobao.org/dist --global
安装完yarn之后就可以用yarn代替npm了,例如用yarn
代替npm install
命令,用yarn add 某第三方库名
代替npm install --save 某第三方库名
。
(注意:目前npm5(发文时最新版本为5.0.4)存在安装新库时会删除其他库的问题,导致项目无法正常运行。请尽量使用yarn代替npm操作。)
下载安装Android Studio开发工具 配置android模拟器(采用的是android studio以及自带的模拟器)
1.Android Studio需要Java Development Kit [JDK] 1.8(暂不支持更高版本)。你可以在命令行中输入 javac -version
来查看你当前安装的JDK版本。如果版本不合要求,则可以到 官网上下载。 或是使用包管理器来安装(比如choco install jdk8
或是apt-get install default-jdk
)
2.下载android studio完成之后,直接解压文件,在bin路径中根据当前系统是32位还是64来选择不同studio.exe安装程序,双击打开
除非特别注明,请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository
,而这也是React Native必须的(否则在react-native run-android时会报appcompat-v7包找不到的错误)。
(1)确定所有安装都勾选了,尤其是Android SDK
和Android Device Emulator
。
(2)在初步安装完成后,选择Custom
安装项:
(3)检查已安装的组件,尤其是模拟器和HAXM加速驱动。
(4)在Android Studio的欢迎界面中选择Configure | SDK Manager
。
(5)在SDK Platforms
窗口中,选择Show Package Details
,然后在Android 6.0 (Marshmallow)
中勾选Google APIs
、Android SDK Platform 23
、Intel x86 Atom System Image
、Intel x86 Atom_64 System Image
以及Google APIs Intel x86 Atom_64 System Image
。
(6)在SDK Tools
窗口中,选择Show Package Details
,然后在Android SDK Build Tools
中勾选Android SDK Build-Tools 23.0.1
(必须包含有这个版本。当然如果其他插件需要其他版本,你可以同时安装其他多个版本)。然后还要勾选最底部的Android Support Repository
ANDROID_HOME环境变量配置
确保ANDROID_HOME
环境变量正确地指向了你安装的Android SDK的路径。
打开控制面板
-> 系统和安全
-> 系统
-> 高级系统设置
-> 高级
-> 环境变量
-> 新建
点击新建 新建系统变量 变量名ANDROID_HOME 变量值为android SDK路径如 C:\Users\DELL\AppData\Local\Android\Sdk,在系统变量PATH中添加%ANDROID_HOME%
android studio安装完成之后
初始化一个react-native项目
react-native init AwesomeProject cd AwesomeProject react-native run-android
android studio安装成功之后,将项目AwesomeProject import进入到andorid studio中,选中项目下的Android目录,在工具栏上选中Run app ,需要注意添加android虚拟设备
注意:每次
react-native run-android之后 如果cmd终端出现红色错误提示,可能是上一次build之后导致的,需删除掉Android/app/目录中的build文件,再次执行 react-native run-android
参考文档:https://reactnative.cn/docs/0.27/getting-started.html#content