标题背景
最近公司接了一个项目,需要做移动端,由于没有IOS相关的人员,为了减少学习成本,就打算使用的混合开发的技术。简单了解了一下,现有跨平台方案有:Flutter,React Native,Weex和Cordova这种hybride开发。考虑了一下技术的运行速度,支持平台,生态环境,上手速度。还是决定了使用React Native。主要是因为:
- 客户需求简单,性能要求不高。
- React Native发展时间久,依赖和资料比较多。
- 团队内有前端经验的人多,上手较快。
环境搭建
环境搭建这一块,其实官网地址写的就很清楚了。如果懒得打开也可以直接看下面。
必须安装的依赖有:Java,Node,Python2,Android Studio。
注意 Node 的版本必须大于等于 10,不要使用cnpm,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)。
Java环境设置方法
node环境设置方法
Python环境设置方法
Android环境设置
1,安装Android Studio。
下载地址:https://developer.android.com/studio/index.html。
2,安装Android SDK。
Android Studio自带SDK,目前必须安装Android 9 (Pie)版本的 SDK。 也可以在 Android Studio 的Appearance & Behavior → System Settings → Android SDK下,自己手动设置SDK路径。
SDK 默认是安装目录:c:\Users\你的用户名\AppData\Local\Android\Sdk
3,配置 ANDROID_HOME 环境变量
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):
4,配置platform-tools 环境变量
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。点击新建然后把 platform-tools 目录路径添加进去。默认路径为:c:\Users\你的用户名\AppData\Local\Android\Sdk\platform-tools。
至此,开发环境已经配置完成了。可以打开AS创建一个原生Android工程试试,是否可以正常运行。
#创建新React Native项目
使用命令行创建项目
react-native init AwesomeProject
AwesomeProject 为创建项目的名字。这个步骤也会下载资源,注意网络环境。
注意:请不要在某些权限敏感的目录例如 System32 目录中 init 项目!会有各种权限限制导致不能运行!
#编译并运行 React Native 应用
在项目创建完成之后,进入刚才创建的项目的目录。然后运行react-native run-android,类似:
cd AwesomeProject
react-native run-android
注意:要已经连接了Android真机或者Android模拟器。此操作会下载大量的依赖,请保证网络畅通。
运行成功之后APP会自动打开,并显示如下画面: