React-Native启航
官方的介绍
Learn once, write anywhere: Build mobile apps with React
优势:
使用JavaScript与React构建app应用
相较于其的H5混和开发的方式React-Native渲染到本地会解释执行为原生的组件，所以性能上有一定的优势
环境的搭建
这里推荐采用官方教程部分内容需要翻墙请自备梯子
Android开发环境需要安装Node，React-Native，Python2，JDK和Android Studio
Chocolatey安装
首先安装Window下比较好用的批处理文件Chocolatey，Window下一般是以管理员身份打开cmd.exe
然后键入@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
Python2、Node、JDK8安装
然后管理员权限打开命令行一次依次输入
choco install nodejs.install
choco install python2
choco install jdk8
ps: node的版本最好用最新的
React-Native CLI的安装
已经安装了Node.js之后会自定配置npm,打开命令行输入
npm install -g react-native-cli
Android Studio的安装
Android Studio获取网址
需要安装的SDK以及对应要更新的软件
- Android SDK
- Android SDK Platform
- Performance (Intel ® HAXM)
- Android Virtual Device
ps:最好在系统环境变量配置一下ANDROID_HOME,指定到自己本地SDK安装目录
1497420686666.png
运行示例项目
初始化准备
首先要准备一台Android设备或者直接用Android Studio自带的ADM新建一个虚拟设备
1497420794484.png
查看设备列表的指令:
adb devices
ps:前提是已经在环境变量里面配置了相关的路径,不然有可能抛adb不是内部或外部命令，也不是可运行的程序或批处理文件。
获取远程示例项目
自己新建一个文件夹用于放置工程
1497421034170.png
然后这里shfit+鼠标右键，选择在此处打开命令行输入
react-native init HelloWorld
ps:上面最后的AwesomeProject这个名字可以随意指定的
等待项目下载安装完成即可
运行示例项目
项目已经下载下来了之后，需要进入该文件目录（我本地拉取时候新建的工程名字是HelloWorld）然后运行run-android指令
cd HelloWorld
react-native run-android
首次运行大概是这样子
1497421363079.png
修改下文字内容试下
用WebStorm或者Intelji打开我们的项目
找到index_android.js这个文件
1497421709743.png
之后修改几行代码,如下图
![XY9_]4PPIT{D{DUOZQ9C7.png](https://img.haomeiwen.com/i2968643/6710f8bd7c91ce7b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
双击键盘R或者Ctrl+M选择Reload之后可以看到我们写的文字已经可以显示出来了
1497421818567.png
结语:这个只是刚开始探索RN开发的环境变量配置以及初次运行项目的体验,后续的学习我会陆续记录个人笔记。今天就简单介绍到这里吧。
网友评论