React Native 一:开发环境搭建
在学习React Native的过程中,相信对于一个App开发工程师,没有充分的学习过前端开发技术的同学来说,顺利的搭建好开发环境还是比较纠结的。
下面,我就根据我自己学习过程中的总结,跟大家讲解讲解如何从零开始顺利的搭建React Native的开发环境,希望对大家的学习有所帮助。我是以Ubuntu操作系统进行开发的,具体步骤如下:
apt-get install git
tar zxvf jdk-8u77-linux-x64.tar.gz
gedit /etc/profile
export JAVA_HOME=/usr/local/opt/jdk1.8.0_77
export CLASSPATH=.:$JAVA_HOME/lib:$JAVA_HOME/jre/lib:$CLASSPATH
export PATH=$JAVA_HOME/bin:$JAVA_HOME/jre/bin:$PATH
source /etc/profile
unzip android-studio-ide-141.2456560-linux.zip
tar zxvf android-sdk_r24.4.1-linux.tgz
cd /usr/local/opt/android-studio/bin
./studio.sh
export ANDROID_HOME=/usr/local/opt/android-sdk-linux
export PATH=$PATH:$ANDROID_HOME/platform-tools
unzip gradle-2.12-all.zip
export GRADLE_HOME=/usr/local/opt/gradle-2.12
export PATH=$PATH:$GRADLE_HOME/bin
touch ~/.gradle/gradle.properties && echo "org.gradle.daemon=true" >> ~/.gradle/gradle.properties
export ANDROID_HOME=/usr/local/opt/android-sdk-linuxexport PATH=$PATH:$ANDROID_HOME/platform-tools
pengchengxiang@ubuntu:~/Desktop$ chmod +x genymotion-2.6.0-linux_x64.bin
pengchengxiang@ubuntu:~/Desktop$ sudo ./genymotion-2.6.0-linux_x64.bin -d /usr/local/opt/
[sudo] password for pengchengxiang:
Installing for all users.
Installing to folder [/usr/local/opt/genymotion]. Are you sure [y/n] ? y- Trying to find VirtualBox toolset .................... OK (Valid version of VirtualBox found: 4.3.36_Ubuntur105129)- Extracting files ..................................... OK (Extract into: [/usr/local/opt/genymotion])- Installing launcher icon ............................. OK
Installation done successfully.
You can now use these tools from [/usr/local/opt/genymotion]:- genymotion- genymotion-shell- gmtool
pengchengxiang@ubuntu:/usr/local/opt/genymotion$ ./genymotion
sudo apt-get install -y build-essential
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs
git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.1.0 # the latest stable release
./autogen.sh
./configure --prefix=/usr/local/opt/watchman
make
sudo make install
pengchengxiang@ubuntu:~$ npm install -g flow-bin
npm WARN deprecated graceful-fs@3.0.8: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
> spawn-sync@1.0.15 postinstall /usr/lib/node_modules/flow-bin/node_modules/bin-wrapper/node_modules/bin-check/node_modules/spawn-sync
> node postinstall
npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN deprecated graceful-fs@1.2.3: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
/usr/bin/flow -> /usr/lib/node_modules/flow-bin/cli.js
> flow-bin@0.22.1 postinstall /usr/lib/node_modules/flow-bin
> node lib/install.js
fetch : https://github.com/facebook/flow/releases/download/v0.22.1/flow-linux64-v0.22.1.zip
progress : [====================] 100% 0.0s
✔ flow binary test passed successfully
flow-bin@0.22.1 /usr/lib/node_modules/flow-bin
├── logalot@2.1.0 (figures@1.5.0, squeak@1.3.0)
└── bin-wrapper@2.1.3 (os-filter-obj@1.0.3, is-path-global@1.0.2, npm-installed@1.0.0, globby@1.2.0, lnfs@1.1.0, download-status@2.2.1, bin-version-check@2.1.0, bin-check@1.1.0, download@3.3.0)
pengchengxiang@ubuntu:~$ npm install -g react-native-cli
/usr/bin/react-native -> /usr/lib/node_modules/react-native-cli/index.js
react-native-cli@0.2.0 /usr/lib/node_modules/react-native-cli
├── semver@5.1.0
├── minimist@1.2.0
├── chalk@1.1.3 (escape-string-regexp@1.0.5, ansi-styles@2.2.1, supports-color@2.0.0, strip-ansi@3.0.1, has-ansi@2.0.0)
└── prompt@0.2.14 (revalidator@0.1.8, pkginfo@0.4.0, read@1.0.7, utile@0.2.1, winston@0.8.3)
pengchengxiang@ubuntu:~$ react-native init AwesomeProject
This will walk you through creating a new React Native project in /home/pengchengxiang/AwesomeProject
Installing react-native package from npm...
Setting up new React Native app in /home/pengchengxiang/AwesomeProject
react@0.14.8 node_modules/react
├── envify@3.4.0 (through@2.3.8, jstransform@10.1.0)
└── fbjs@0.6.1 (whatwg-fetch@0.9.0, ua-parser-js@0.7.10, loose-envify@1.1.0, promise@7.1.1, core-js@1.2.6)
To run your app on iOS:cd /home/pengchengxiang/AwesomeProjectreact-native run-ios
- or -
Open /home/pengchengxiang/AwesomeProject/ios/AwesomeProject.xcodeproj in XcodeHit the Run button
To run your app on Android:Have an Android emulator running (quickest way to get started), or a device connectedcd /home/pengchengxiang/AwesomeProjectreact-native run-android
pengchengxiang@ubuntu:~/AwesomeProject$ adb reverse tcp:8081 tcp:8081
pengchengxiang@ubuntu:~/AwesomeProject$ sudo react-native start
[sudo] password for pengchengxiang:
┌──────────────────────────────────────────────────────────────┐
│ Running packager on port 8081. │
│ Keep this packager running while developing on any JS projects. Feel │
│ free to close this tab and run your own packager instance if you │
│ prefer. │ │
│ https://github.com/facebook/react-native │
│ └───────────────────────────────────——————─────────────────────┘Looking for JS files in/home/pengchengxiang/AwesomeProject[1:36:30 AM] <START> Building Dependency Graph[1:36:30 AM] <START> Crawling File System[Hot Module Replacement] Server listening on /hotReact packager ready
pengchengxiang@ubuntu:~/AwesomeProject$ react-native run-android
Starting JS server...
Building and installing the app on the device (cd android && ./gradlew installDebug)...
WARNING [Project: :app] Current NDK support is deprecated. Alternative will be provided in the future.
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
:app:zipalignDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'x600 - 5.0.2'
Installed on 1 devicedBUILD SUCCESSFULTotal time: 18.708 secsStarting the app (/usr/local/opt/android-sdk-linux/platform-tools/adb shell am start -n com.awesomeproject/.MainActivity)...Starting: Intent { cmp=com.awesomeproject/.MainActivity }
React Native 一:开发环境搭建相关推荐
- Android之Windows下搭建React Native Android开发环境(差不多搞了一天)
Android之Windows下搭建React Native Android开发环境 穷逼买不起mac,但是他们都说React Native Android只能在mac下面 ...
- python安卓版开发环境搭建_React Native Android 开发环境搭建(Windows 版)
补上之前说的 Windows 系统的 React Native 开发环境搭建,坑还是比 Mac 环境下的多些.此文的受众还是已经搭建过 Android 开发环境的同学. 需要安装的软件 Chocola ...
- 在windows下搭建React Native Android开发环境
1.登录 React Native 中文网 http://reactnative.cn/docs/0.45/getting-started.html 2.登录 Chocolatey 下载包管理工具 h ...
- React Native For Android 环境搭建
一. 环境搭建 1. JDK更新 http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html 使用最新的 ...
- 在Windows下搭建React Native Android开发环境常见问题
1. task ':app:compileDebugJavaWithJavac'. > Could not find tools.jar 是没有配置Java环境 D:/Java\jdk1.8.0 ...
- 手把手教React Native实战开发视频教程 干货
手把手教React Native实战开发视频教程[更新到70集啦...] ================================ 由于360云盘关闭,作者已经将资源迁移.需要的朋友请访问一下 ...
- 使用create-react-app搭建TypeScript+React+Ant Design开发环境
一.使用create-react-app创建一个支持TypeScript+React的开发环境: 要创建一个支持TypeScript的Create React App项目,可以运行: npx crea ...
- 1、RN跨平台开发——环境搭建
了解React Native React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP.React Native着力于提高多平台开发的 ...
- SQL审核 | SQLE 二次开发环境搭建
作者:Jason 就职于捷信消费金融有限公司,担任 DBA 工作.先后从事过 oracle .mongo .mysql 的 DBA ,以及大数据 ETL 的开发工作.对 NEWSQL 以及云原生分布式 ...
最新文章
- python matplotlib模块画出的图像转换为.tiff格式
- Android学习笔记18:自定义Seekbar拖动条式样
- Unity图片优化神器 - dither算法究极进化方案
- SpringMVC框架的介绍
- 成大事必备的9种心态
- python人工智能入门优达视频_机器学习:优达教你搭建Python 环境的正确姿势
- 处理wordpress上传中文名附件乱码问题
- CodeForces 1506C(暴力求最长连续子串) acm寒假集训日记21/12/31or22/1/1
- docker rabbitmq_Docker部署RabbitMQ集群
- mysql存储过程判断多个条件语句_存储过程里多条件判断(SQL组合查询)
- Linux运维的黑客之路
- Ubuntu IPFS小白安装入门教程
- 打开unity卡在loading白屏界面
- 谁会成为今年的Best CIO人选
- WinDbg单机调试
- PostgreSql增删改(与mysql差异)
- 发布工程到私有仓库maven
- TextView源码解析
- java 爬虫框架收集
- dropbox文件_如何更改您的Dropbox文件夹的位置
热门文章
- oculus rift s_如何设置Oculus Rift并开始玩游戏
- STL 中list删除元素
- 看无字幕外文讲课视频听不懂怎么办?
- webpack学习(输出output)
- cms php vue 开源_vue_cms
- 杰理芯片AC695通用SDKfw-AC63_GP_MCU-AC63_GP_MCU_v1.4.0使用心得
- 保留小数点1位 php,PHP保留小数位的三种方法
- 灵性图书馆:好书推荐-《觉悟自我的科学》
- win10拖动文件夹资源管理器闪退
- 冷链冷库|果蔬保鲜储藏冷链冷库 海格里斯带你走进果蔬冷库世界