react-native教程一

android studio 教程 | 2019-02-26 18:18

最近,小编已经很久发帖子了,前面几个公众号粉丝帮我整理了book库在这里我特别感谢,从今天起,我将每天发布react-native的教程,react-native是一个开放软件前端(安装在手机里的APP叫前端,当放在服务器的叫后端(需要联网范围))的一种新的框架,以前开放前端软件,需要开放,iOS(苹果手机),Android(安卓手机),iOS的用object-c语言或者swift,Android的用Java,这样对于一些创业公司,对前端的要求很麻烦,需要两个团队,所以就产生H5,就是手机网页(微信小程序就是模仿H5的),但是大家都知道,网页是不能调用手机硬件的(而且必须要联网),所以性能就很弱,所以就产生react-native,react-native是只需要会JavaScript(注:JavaScript和Java一点关系都没有)就可以同时开放Android APP和iOS APP性能和原生APP(原生APP指,用object-c开发的iOS和Java开发的Android)差不多访问一下官网,就有中文的开发文档:

安装教程:(iOS开发必须要在Mac笔记本才行,Windows下无法开发)

Windows Android:依赖安装(node(node必须要高于8.3),Python2(Python必须要2才行不能用三1),Java(Java只能用1.8))

软件链接:

Python2安装基本上下一步(自己选择路径(注,千万不能用中文路径,否则会产生问题)),然后配置环境变量(小编用的路径是E:\setup\Python2.7),(在安装的路径里吧Python.exe修改成python2,避免和python3产生冲突)

然后配置环境变量,直接把安装路径(E:\setup\Python2.7)复制,然后在电脑的计算机哪里左键(选择属性--高级系统设置--环境变量--Path变量(系统变量哪里找到)--双击)在后面加入一个分号(一定是英文分号)然后粘贴E:\setup\Python2.7,确定就可以了,然后,按Windows+R 输入cmd确定,输入python2 -version产生版本就说明安装成功了

下来我们安装Java1.8,也是同样的,原来,也要创建环境变量也是和python2差不多的原理,

然后安装node(node其实就是JavaScript用于编写后台的语言),node不需要,配置环境变量,自己就配置好了,安装完node以后

建议设置 npm 镜像以加速后面的过程(或使用科学上网工具)

npm config set registry --globalnpm config set disturl https://npm.taobao.org/dist --global直接Windows+R输入按enter键就可以了

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

npm install -g yarn react-native-cli安装完 yarn 后同理也要设置镜像源:

yarn config set registry --globalyarn config set disturl https://npm.taobao.org/dist--global安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名。以上完成了就完成一大半了,现在开始安装Android studio

首先下载和安装 Android Studio,国内用户可能无法打开官方链接,请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项,确保选中了以下几项:

Android SDK

Android SDK Platform

Performance (Intel ® HAXM) (AMD 处理器看这里)

Android Virtual Device

一直next就可以了(这个过程要么设计镜像要么科学上网)

选择configure,然后选择sdk manager(sdk是,software,develop kite,软件开发组件),然后把4.1以上的开放组件全部选上,当然你可以可以全部选择(网络够的情况下),然后apply,OK,等着下载

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

Android SDK Platform 28

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

然后,安装完了以后,配置环境变量,

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):

SDK 默认是安装在下面的目录:

c:\Users\你的用户名\AppData\Local\Android\Sdk你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior → System Settings → Android SDK。

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

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。点击新建然后把 platform-tools 目录路径添加进去。

此目录的默认路径为:

c:\Users\你的用户名\AppData\Local\Android\Sdk\platform-tools在这里以上步骤完成以后,基本上OK了,然后你一定要把Android studio的虚拟机创建了,然后把虚拟机打开,虚拟机用Android9 pie版本的

然后 adb devices 可以查看Android连接的虚拟机设备

如果没有出现,说明你的虚拟机没有连接成功,你要出现打开虚拟机

然后可以创建项目了

打开Windows + R,cmd ,切换到你要创建项目的目录,然后输入

react-native init AwesomeProject注(AwesomeProject是项目名称)

等一段时间

创建完成以后,

cd AwesomeProjectreact-native run-android执行软件了

完成了!恭喜!你已经成功运行并修改了你的第一个 React Native 应用。

主要安装Android studio不是开发工具啊,而是,运行环境

你开发工具要有开发JavaScript的编辑器才行,小编推荐用atom,当然你也可以用其他的

atom安装比较简单,修改APP.js就可以编写代码了,今天到这来,明天,继续第二篇