React-native 环境配置window端mac端
来源:互联网 发布:c语言if语句多个条件 编辑:程序博客网 时间:2024/05/29 08:05
新技术React-native,听很多同学都在学,网络上也大力推广。但作为一名Android原生爱好者却对此若近若离。最近突发奇想,突然想试试。但由于本人的主力系统是windows,mac也是在虚拟机上装着玩玩。所以先从windows上入手,但也踩了无数坑。
确实如此,React-native对ios的支持比windows要好的太多了。也在此记录下所有的过程及异常情况处理。
首先一点,就是最好跟着中文官方文档走。无论是windows端还是mac端,访便无数博客,到头来还是看中文官方
文档。而以下只是我的搭建记录罢了。
Windows端:
做好准备,GIT、JDK,SDK,PYTHON2+。把基本的环境准备好。特别是SDK中SDK Platforms窗口中选择Android6.0勾选Google APIs、Android SDK Platform23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
在SDK Tools窗口中在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1此版本,在最底部勾选Android Support Repository。
并且ANDROID_HOME等环境变量要在PATH中设置好,否则在编译时会失败。
-----小型分割线-----
以上工作准备好后就还是环境搭建了。首先是下载最新版的node.js安装包。我们不下解压版是因为安装包可以直接配置环境变量。
在安装好后,可以查看PATH中是否存在node.js的环境。
打开cmd,输入一下命令设置npm镜像加速:
npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global
在下载react-native-cli时我们一定要使用官网的方法下载安装yarn:
npm install -g yarn react-native-cli
并设置其镜像源:yarn config set registry https://registry.npm.taobao.org --globalyarn config set disturl https://npm.taobao.org/dist --global
在此,所有的环境基本准备好,接下来就需要开始测试环境搭建成功,并跑我们的项目了。找一个自己的文件夹作为自己React-native项目的工作空间,并将cmd路径移动至此。输入一下命令,建立AwesomeProject项目:
react-native init AwesomeProject
此时这就是我们的React-native的项目了。进入其中并先进行网络测试:cd AwesomeProjectreact-native start
此时,项目会运行服务端(总感觉这个描述不对哈)。然后可以进入http://localhost:8081/index.android.bundle?platform=android查看自己的链接是否成功。如果是以下情况,就是完成了。之后就可以接着打开另一个cmd,到此项目里,并使用一下命令:
react-native run-android
稍等片刻就可以等待android手机运行成功啦。当然,以上是个完美的故事。在测试时,我出现了连个问题。其中第一个问题恶心至极,你会在react-native start的时候出现以下情况:
出现如图这样的错误,查了很久,真的很久。并且在提出问题时也有和我一样的出现了该问题。目前貌似只有两个解决方案,两个我都试过,不过另一个没有成功。首先就是在自己的项目里使用一下命令行:
yarn remove babel-preset-react-native
yarn add babel-preset-react-native@2.1.0
本人验证,并推荐给多人验证得出结论。表名基本可以解决这类问题。
第二个方法是使用一下命令:
npm uninstall babel-preset-react-native
npm install babel-preset-react-native@2.1.0 —save
不过测试结果并没有成功。也不知道是什么问题。
第二个问题就好解决了,assets文件夹找不到,我们只需要在项目中的android\app\src\main中创建一个assets文件夹。然后cmd在项目路径中运行以下命令:
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/s
rc/main/assets/index.android.bundle --assets-dest android/app/src/main/res
就可以解决这个问题了。
-----------------粗暴的分割线-------------------
Mac端:
一个词:友好。
在Windows的经验下,紧跟着中文官方文档搭建后,就结束了React-native环境搭建。
在此我只是要记录一个问题在文档里也特殊说明的一点:
一定需要注意这个版本的问题,不像Windows环境下,此时在init项目时要设置版本号,不然运行前的编译无法通过。
- React-native 环境配置window端mac端
- Mac 配置react native环境
- React Native - window 环境安装与配置
- React-Native在window上配置环境
- React Native--01 Mac下React Native 环境的配置
- React Native Mac环境的安装配置
- React-Native环境配置For Mac
- React Native环境配置 for Mac
- MAC 配置React Native开发环境
- Mac配置 React Native开发环境
- mac 配置React Native的开发环境
- React Native Mac配置安卓环境
- Window环境下配置React Native Android环境
- Window环境React-native环境配置步骤(Android)
- Mac环境下react native环境安装与配置
- window配置React+Native 安卓开发环境
- React Native环境配置 —— window版
- React Native 环境配置
- react使用
- left join 比之 子查询
- Android官方DataBinding(七):BindingMethods与BindingMethod
- 程序员的第一份工作
- cocos2dx屏幕截图
- React-native 环境配置window端mac端
- opencv中的开运算,闭运算,形态学梯度,顶帽和黑帽
- USACO 2017 US Open Contest, Platinum Problem 3. COWBASIC
- Struts基本执行流程
- 迭代地删除文件夹及其下的所有文件
- 日语入门学习,五十音图日语基础知识
- 双端队列
- 三种简单排序
- 剑指offer面试题4