（⼀）react-native开发系列之Mac开发环境配置
写在前⾯
在开始之前，先说下选择react-native的背景原因
最近⼀年来，公司为了节省开发成本，以及降低维护成本，指派我开始做起前端开发app的⼯作，我和公司的⼩伙伴们就开始了漫长的app 开发之旅；为了更好的结合现在使⽤的技术栈进⾏开发（现使⽤vue系列框架），刚开始选择了cordova结合vue做app开发，也上线了⼀款应⽤（商城类项⽬），流畅度在ios设备上以及中⾼端android⼿机上还算流畅，当时也想过就确定使⽤这个技术栈进⾏app开发了，不过后来⼜有了新的变数。
由于公司是属于仓储类型的公司，平常仓库⼈员拣货理货都是使⽤⼿持PDA进⾏作业，所以公司要求做⼀款针对PDA设备的应⽤，由于PDA设备系统⽐较⽼（android4.2.2），且性能低下，刚⼀开始还是使⽤cordova+vue进⾏项⽬开发，在pda上安装测试版app的时候发现cordova使⽤的webview并不能很好的兼容这种低端设备，也是尝试了主流的webview，包括腾讯的X5和Crosswalk两个webxiew，都不能很好的解决适配问题，由于项⽬已⽤vue写好，所以只能其它可以提供原⽣webview技术；还好皇天不负有⼼⼈，最终使⽤hbuilder的打包平台解决了兼容性问题，重新写了与原⽣交互的⽅法之后项⽬终于上线了。
如上所⾔，后来⽤hbuilder打包的应⽤虽然顺利上线了，但是使⽤hbuilder云打包并不是最佳的选择，⽐如说前⼀段时间项⽬修改后要上线，然后提交云打包，但是打包下来的包在PDA上安装不上，和hbuilder的团队沟通了两天才解决掉，当时就感觉靠⼈不如靠⾃⼰啊，虽说使⽤hbuilder也可以实现线下打包，但是经过这件事之后我对他们失望了，加上打包出来的app性能优化上也有⼀定的难度，所以我决定是时候改变写什么了，经过我的提议，使⽤react-native重构当前项⽬被提上了⽇程。
react-native技术的优越性这⾥就不多说了，⽹上有很多对次技术栈的说明以及和其它技术栈对⽐的⽂章，本次系列⽂章⽤来记录开发过程中的⼀些⼼得，和遇到的坑，在此记录，以防后边⼜掉进坑⾥。
（⼀）react-native开发系列之开发环境搭建MAC环境配置
（五）react-native开发系列之原⽣交互
（六）react-native开发系列之打包发⾏app
虽说现在重构的项⽬只⽤在android设备上，但是本着技术储备的初⼼，这次项⽬重构也会考虑到ios设备的兼容，所以这⾥的开发环境⾸先选择的是在mac的系统上搭建，在基础开发环境搭建完善之后，会独⽴出来在windows系统上开发，所以也会搭建⼀套基于windows系统的开发环境，只⽤于开发android应⽤。
Mac环境搭建
因为穷，没钱买Mac，所以就在电脑上安装了个虚拟机凑合使⽤；⽹上有很多windows安装os虚拟机的教程，可⾃⾏搜索安装，我这⾥使⽤的是VMware，安装的系统版本是10.13，如下图
在安装好系统之后，在新系统上安装运⾏react-native的必要环境，Mac安装node.js、yarn相对于windows系统⽐较简单⼀点，下⾯开始安装1、安装Homebrew
Homebrew是Mac的⼀个包管理⼯具，可以使⽤这个⼯具安装开发⼯具，⾸先打开命令⾏⼯具，输⼊以下代码安装Homebrew
/usr/bin/ruby -e "$(curl -fsSL raw.githubusercontent/Homebrew/install/master/install)"
然后⼀路回车，会让输⼊密码，这个密码是登陆系统的密码，输⼊密码之后回车开始安装，安装完成之后如下图
然后就可以使⽤Homebrew安装node.js，react-native要求node.js版本较⾼，使⽤以下命令直接安装即可
brew install node
安装完成之后使⽤node -v查看⼀下node.js的版本，我这⾥安装的版本是10.1.0
安装yarn
brew install yarn
2、安装jdk
由于还要在Mac上开发android，所以还需要安装jdk，下载Mac版，安装jdk，安装完成之后还需要配置下jdk的环境变量，⽅法如下
（1）打开命令⾏窗⼝，如果是第⼀次配置环境变量使⽤touch .bash_profile，如果之前已经⽣成过.bash_profile⽂件，则可以直接修
改.bash_profile⽂件，打开.bash_profile⽂件使⽤open -e .bash_profile，因为我这⾥已经有这个⽂件了，现在使⽤open -e .bash_profile打开如下
我这⾥是已经配置好的环境变量，如上图内容，在.bash⽂件⾥输⼊
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_172.jdk/Contents/Home
CLASSPAHT=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
PATH=$JAVA_HOME/bin:$PATH:
export JAVA_HOME
export CLASSPATH
然后保存，关闭此窗⼝，使⽤source .bash_profile命令使刚刚配置的环境变量⽣效，输⼊java -version查看jdk是否已经安装成功，如果成功如下
3、安装android-sdk
要想开发Android只有jdk还是不⾏的，还需要android-sdk
下载skd for Mac，点击可下载
下载后解压，命令⾏进⼊tools⽂件夹，输⼊./android sdk，打开sdk-manager，如下图
然后就是下载sdk build-tools和需要版本的API啦，接下来还需要配置下环境变量，同jdk的环境变量配置类似，由于已经创建过.bash_profile ⽂件了，此处可直接打开配置⽂件，使⽤open -e .bash_profile
命令打开配置⽂件，输⼊以下内容
export PATH=${PATH}:/soft/android-sdk-macosx/platform-tools
export PATH=${PATH}:/soft/android-sdk-macosx/tools
export CLASSPATH
export PATH
输⼊source .bash_profile使配置⽣效，验证skd，输⼊adb，出现以下内容说明配置成功
4、安装xcodereactnative教程
以上⼏步基本都是搭建android环境所需的，接下来再说下ios的开发所需环境，安装xcode
由于是⿊苹果，⽆法从AppStore直接下载xcode，这⾥提供，版本为9.2，直接双击打开安装包即可安装
5、初始化react-native项⽬
（1）全局安装react-native-cli
npm install react-native-cli -g
（2）初始化项⽬，这⾥以使⽤0.44.3版本为例
react-native init RnDemo --version 0.44.3
稍等⼀会就会下载好，并且⾃动使⽤yarn下载好了依赖
进⼊项⽬⽬录下⾯cd RnDemo，然后react-native run-android，或者react-native run-ios，刚下载下来如果不更改配置的话⼀般情况下run-android都会报错，具体会出现什么报错，后边会另有⽂章提到，这⾥不在⼀⼀列出来，是我调试好的项⽬配置，下载下来直接运⾏直接可⽤。
（3）react-native run-ios
在已经安装了xcode的情况下，直接运⾏react-native run-ios会⾃动开启xcode的ios模拟器，稍等⼀下就会看到在模拟器上安装的应⽤，并且会⾃动打开，如下图
这样去修改⽂件⾥的index.ios.js然后刷新模拟器（win+r）就会看到页⾯的变化。
（4）react-native run-android
这⾥以android真机为例，将Android⼿机插⼊电脑，输⼊adb devices查看是否连接成功，如下图所⽰即表⽰连接成功
上⾯那⼀串就是所连接的设备
然后运⾏react-native run-android
* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
额，报错了，说SDK位置不对，⽬前我也不清楚原因是什么，解决⽅法是在android⽬录下⾯新建⼀个名为local.properties的⽂件，⾥⾯内容指向SDK地址，如下代码
sdk.dir=/soft/android-sdk-macosx  // ⾃⼰的sdk位置
然后重新运⾏react-native run-android
依然报错，此时debug包已经打好了，只是⽆法安装到⼿机上，此时有两种解决⽅式可以选择，⼀种是下⾯的⽂件⽬录下的安装包通过其它⽅式安装打⼿机
另外⼀种⽅式是修改android的配置信息，修改内容如下
修改完这三个⽂件之后重新run-android就可以成功了
现在ios模拟器和Android真机都运⾏起来了，就可以愉快的进⾏开发了。windows环境配置仅⽤于开发android，下篇说下windows环境下的react-native配置。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。