ReactNative开发环境的搭建与开发前准备(一)

简介: ReactNative开发环境的搭建与开发前准备

一、准备工作


   在ReactNative中文网上有详细的开发文档与教程,首先,想要系统了解ReactNative的朋友可以在如下网站中获取详细信息:


http://reactnative.cn/


本篇博客记录搭建ReactNative开发环境中的一些问题与注意点,也介绍在MacOS系统上搭建ReactNative开发环境的全过程与一些小经验技巧。


   ReactNative最大的魅力在于其编写的代码可以跨平台应用,因此我极力推荐在MacOS上进行ReactNative应用的开发,由于Xcode开发工具只能运行与MacOS系统,在Windows或Linux系统上将无法进行iOS平台的调试,因此本篇博客也将基于MacOS系统进行演示。    


   在ReactNative环境之前,开发者需要先安装一些小工具,首先需要安卓Homebrew工具,Homebrew工具是Mac系统的包管理器,在终端运行如下命令进行安装:


/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装完成后,可以使用brew -v命令检查Homebrew版本,正常输出版本号说明安装成功:




在安装过程中,如果遇到权限问题,需要使用如下命令进行修复:


sudo chown -R `whoami` /usr/local

   安装完成Homebrew后,需要使用其来进行Node环境的安装,使用如下命令:


安装完成后,同样可以使用node -v命令来检查是否安装成功:




虽然Yarn是facebook提供的代替npm的包管理工具,但我个人更倾向使用npm来进行ReactNative包的安装,在使用之前,可以通过替换源镜像的方式来进行npm的加速(在无法科学上网的前提下):


npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

之后使用npm config get registry来检查源镜像的替换是否成功:




之后我们需要安装ReactNative的命令行工具react-natice-cli。这个工具用来初始化ReactNative项目,命令如下:


npm install -g react-native-cli

使用react-native -v命令来检查是否安装成功:




到此,ReactNative的基础环境已经搭建完成了,下面需要配置iOS与Android开发工具。


二、Xcode与Android Studio配置


   Xcode基本无需进行额外的配置,你只需要从AppStore上下载下来最新版本的Xcode开发工具安装完成即可,Xcode会打包安装命令行工具,git工具和所需要的模拟器。


   对于Android开发环境,首先你需要保证你的Android Studio工具版本在2.0以上并且Java版本要在1.8以上,javac -version命令可以查看当前的JDK版本,如果低于1.8,可以到官网下载:




官网:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html


下载安装完成Android Studio后,首先需要对SDK进行相应配置,打开Android Studio,打开欢迎界面的SDK Manager,如下图:


image.png


选中其中的SDK Platforms,勾选Show Package Details。我选择Android6.0相关的SDK进行安装,Android SDK Platform 23,Intel x86 Atom_64 System Image为必选, 如下图所示:



image.png

除此之外,还需要安装SDK Tools,必须安装其中的23.0.1版本,切记,这是必须!如下图:


image.png


之后随便使用Android Studio创建一个项目,打开其中的AVD Manager,如下:



image.png

AVD Manager用来管理Android模拟器,如果以后模拟器,可以点击运行按钮开运行模拟器,如果没有,可以创建一个模拟器,如下图:


image.png


做完上述步骤后,切记要配置Android SDK的环境变量,在终端使用如下命令进行环境变量文件的编辑:


sudo vi ~/.bash_profile

在文件中添加如下路径:


export ANDROID_HOME=~/Library/Android/sdk

之后在终端执行如下命令来使设置生效:    


source ~/.bash_profile

可以使用echo $ANDROID_HOME命令来检查环境变量的配置是否正确,如下:


image.png


目录
相关文章
|
2月前
|
前端开发 JavaScript API
React开发需要了解的10个库
本文首发于微信公众号“前端徐徐”,介绍了React及其常用库。React是由Meta开发的JavaScript库,用于构建动态用户界面,广泛应用于Facebook、Instagram等知名网站。文章详细讲解了Axios、Formik、React Helmet、React-Redux、React Router DOM、Dotenv、ESLint、Storybook、Framer Motion和React Bootstrap等库的使用方法和应用场景,帮助开发者提升开发效率和代码质量。
123 4
React开发需要了解的10个库
|
4月前
|
设计模式 存储 前端开发
React开发设计模式及原则概念问题之自定义Hooks的作用是什么,自定义Hooks设计时要遵循什么原则呢
React开发设计模式及原则概念问题之自定义Hooks的作用是什么,自定义Hooks设计时要遵循什么原则呢
|
5月前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。
|
2月前
|
前端开发 JavaScript 开发者
React 组件化开发最佳实践
【10月更文挑战第4天】React 组件化开发最佳实践
50 4
|
3月前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件
|
3月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
4月前
|
JavaScript 前端开发 安全
[译] 使用 TypeScript 开发 React Hooks
[译] 使用 TypeScript 开发 React Hooks
|
4月前
|
移动开发 前端开发 JavaScript
"跨界大战!React Native、Weex、Flutter:三大混合开发王者正面交锋,揭秘谁才是你移动应用开发的终极利器?"
【8月更文挑战第12天】随着移动应用开发的需求日益增长,高效构建跨平台应用成为关键。React Native、Weex与Flutter作为主流混合开发框架各具特色。React Native依托Facebook的强大支持,以接近原生的性能和丰富的组件库著称;Weex由阿里巴巴开发,性能优越尤其在大数据处理上表现突出;Flutter则凭借Google的支持及独特的Dart语言和Skia渲染引擎,提供出色的定制能力和开发效率。选择时需考量项目特性、团队技能及生态系统的成熟度。希望本文对比能助你做出最佳决策。
168 1
|
4月前
|
前端开发
React——开发调式工具安装【五】
React——开发调式工具安装【五】
32 0
React——开发调式工具安装【五】
|
4月前
|
开发者 自然语言处理 存储
语言不再是壁垒:掌握 JSF 国际化技巧,轻松构建多语言支持的 Web 应用
【8月更文挑战第31天】JavaServer Faces (JSF) 框架提供了强大的国际化 (I18N) 和本地化 (L10N) 支持,使开发者能轻松添加多语言功能。本文通过具体案例展示如何在 JSF 应用中实现多语言支持,包括创建项目、配置语言资源文件 (`messages_xx.properties`)、设置 `web.xml`、编写 Managed Bean (`LanguageBean`) 处理语言选择,以及使用 Facelets 页面 (`index.xhtml`) 显示多语言消息。通过这些步骤,你将学会如何配置 JSF 环境、编写语言资源文件,并实现动态语言切换。
42 0