搭建移动端的跨平台开发环境

时间:2022-05-07
本文章向大家介绍搭建移动端的跨平台开发环境,主要内容包括适用范围、搭建开发环境、测试安装、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。

适用范围

大部分情况下均可用React Native一套代码跑两个平台,比如信息展示和交互等等。 如果涉及到手机设备如摄像头、定位、地图等,则要么封装原生代码给React Native调用,要么直接跳转到用原生代码开发的页面。

搭建开发环境

硬件条件:推荐使用Mac电脑开发,可以同时开发iOS和Android两个平台

必装工具

安装指南

  1. Homebrew (Mac下的包管理工具) 安装方法:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  1. Node(Javascript后端,主要用他的npm包管理工具) 安装方法:
brew install node

注意:若安装速度太慢,可考虑换国内的brew源

  1. react-native-cli(React-Native命令行工具) 安装方法:
npm install -g react-native-cli

注意:若安装速度太慢,可考虑换[国内的淘宝npm源]http://npm.taobao.org/)

  1. Xcode 安装方法: App Store,版本Xcode7以上
  2. Android Studio 安装方法: 主要是下载正确的SDK,请参照此目标平台为Android的文章
  3. Watchman(用于检测文件变化) 安装方法:
brew install watchman

测试安装

react-native init AwesomeProject //下载react native的项目模版并命名为AwesomeProject

cd AwesomeProject
react-native run-ios //启动该项目的iOS模拟器并运行

若能成功启动,则你的环境已配置好,可以开始开发啦!