Ubuntu React Native 环境搭建
来源:互联网 发布:女人馒头蝴蝶 知乎 编辑:程序博客网 时间:2024/05/21 09:07
Ubuntu React Native 环境搭建
本人环境是Ubuntu 64位 14.0.4 .
安装 node.js
过程:
- 1.到node官网下载https://nodejs.org/en/
- 2.将node-v4.4.4-linux-x64.tar.xz 下载到的 文件解压到自己的目录.
- 3.将node配置成环境变量如下
export NODE_HOME=/home/djh/djh/node-v4.4.4-linux-x64export PATH=$NODE_HOME/bin:$PATH
在终端输入 node -v 如下出现版本号则说明安装成功
djh@djh-All-Series:~$ node -vv4.4.4
问题:
这个步骤简单 暂时没有出现任何问题.
安装 watchman
过程:
安装依赖
$ sudo apt-get install autoconf automake python-dev
安装 watchman, 如果出错, 查看安装依赖的详细文档
$ git clone https://github.com/facebook/watchman.git$ cd watchman$ git checkout v4.3.0 # the latest stable release$ ./autogen.sh$ ./configure$ make$ sudo make install
问题:
这个步骤简单 暂时没有出现任何问题.如果有问题可以参考文档
安装 react-native
过程:
$ npm install -g react-native-cli
问题:
这个步骤简单 暂时没有出现任何问题.
创建helloworld项目
过程:
$ react-native init HelloWorld
问题:
This will walk you through creating a new React Native project in /home/djh/ReactNativeProject/HelloWorldInstalling react-native package from npm...
这个创建需要点时间,耐心等待.
运行helloworld
过程:
djh@djh-All-Series:~/ReactNativeProject$ cd HelloWorld/djh@djh-All-Series:~/ReactNativeProject/HelloWorld$ react-native start
问题:
ERROR Packager can't listen on port 8081
1 如果遇到这个错误说明有个服务已经在运行了,先关闭它
ERROR A non-recoverable condition has triggered. Watchman needs your help!The triggering condition was at timestamp=1463647475: inotify-add-watch(/home/djh/ReactNativeProject/HelloWorld/node_modules/react-native/node_modules/jstransform/node_modules/commoner/node_modules/iconv-lite/encodings/tables) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctlAll requests will continue to fail with this message until you resolvethe underlying problem. You will find more information on fixing this athttps://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch{"watchmanResponse":{"version":"4.3.0","error":"A non-recoverable condition has triggered. Watchman needs your help!\nThe triggering condition was at timestamp=1463647475: inotify-add-watch(/home/djh/ReactNativeProject/HelloWorld/node_modules/react-native/node_modules/jstransform/node_modules/commoner/node_modules/iconv-lite/encodings/tables) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl\nAll requests will continue to fail with this message until you resolve\nthe underlying problem. You will find more information on fixing this at\nhttps://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch\n"}}Error: A non-recoverable condition has triggered. Watchman needs your help!The triggering condition was at timestamp=1463647475: inotify-add-watch(/home/djh/ReactNativeProject/HelloWorld/node_modules/react-native/node_modules/jstransform/node_modules/commoner/node_modules/iconv-lite/encodings/tables) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctlAll requests will continue to fail with this message until you resolvethe underlying problem. You will find more information on fixing this athttps://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch at BunserBuf.<anonymous> (/home/djh/ReactNativeProject/HelloWorld/node_modules/react-native/node_modules/sane/node_modules/fb-watchman/index.js:95:23) at emitOne (events.js:77:13) at BunserBuf.emit (events.js:169:7) at BunserBuf.process (/home/djh/ReactNativeProject/HelloWorld/node_modules/react-native/node_modules/bser/index.js:289:10) at /home/djh/ReactNativeProject/HelloWorld/node_modules/react-native/node_modules/bser/index.js:244:12 at nextTickCallbackWith0Args (node.js:420:9) at process._tickCallback (node.js:349:13)
2.如果遇到这个问题 解决如下 在终端输入:
echo 256 | sudo tee -a /proc/sys/fs/inotify/max_user_instancesecho 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_eventsecho 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watcheswatchman shutdown-server
官网说这个是watchman的什么个数限制什么的,具体参考 ++https://facebook.github.io/watchman/docs/install.html#system-specific-preparation++
3.因为是第一次弄傻傻的 什么都不懂就在这里一直等,其实服务起来后,就要新开个终端.在这个目录就可以运行到机器了. 这边用的是虚拟机Genymotion
运行apk到android设备
过程:
djh@djh-All-Series:~/ReactNativeProject/HelloWorld$ react-native run-androidJS server already running.Building and installing the app on the device (cd android && ./gradlew installDebug...:app:preBuild UP-TO-DATE:app:preDebugBuild UP-TO-DATE:app:checkDebugManifest:app:preReleaseBuild UP-TO-DATE:app:prepareComAndroidSupportAppcompatV72301Library:app:prepareComAndroidSupportRecyclerviewV72301Library:app:prepareComAndroidSupportSupportV42301Library:app:prepareComFacebookFrescoDrawee081Library:app:prepareComFacebookFrescoFbcore081Library:app:prepareComFacebookFrescoFresco081Library:app:prepareComFacebookFrescoImagepipeline081Library:app:prepareComFacebookFrescoImagepipelineOkhttp081Library:app:prepareComFacebookReactReactNative0260Library:app:prepareOrgWebkitAndroidJscR174650Library:app:prepareDebugDependencies:app:compileDebugAidl:app:compileDebugRenderscript:app:generateDebugBuildConfig:app:generateDebugAssets UP-TO-DATE:app:mergeDebugAssets:app:generateDebugResValues:app:generateDebugResources:app:mergeDebugResources:app:bundleDebugJsAndAssets SKIPPED:app:processDebugManifest:app:processDebugResources
问题:
1.最好先配置好android 的环境和build tool 这里一般需要23.0.1的
++export ANDROID_HOME=/home/djh/djh/adt-bundle-linux-x86_64-20140702/sdk++
如果没有的话使用sdk Manager 下载好.不然会出现很多资源找不到的我问题.
2.第一次运行时间会比较久.
* What went wrong:Execution failed for task ':app:installDebug'.> com.android.builder.testing.api.DeviceException: No connected devices!* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.BUILD FAILED
3.遇到上面问题说明没有打开设备,将Genymotion打开.就可以了.
修改程序将文字修改成Helloworld
过程
1将工程目录下的 index.android.js 下面一段改改
class HelloWorld extends Component { render() { return ( <View style={styles.container}> <Text style={styles.reply}> Hello world </Text> </View> ); }}
问题:
直接按住设备的菜单键 ,选择Reload js 就重新加载了.然后就变成下面的了
后续
将学习运行在真是的手机设备中.
- Ubuntu React Native 环境搭建
- Ubuntu React Native环境搭建
- React Native环境搭建
- react native环境搭建
- react-native环境搭建
- React Native环境搭建
- React Native环境搭建
- React Native环境搭建
- React-native 环境搭建
- React Native 环境搭建
- React Native环境搭建
- React Native环境搭建
- React Native环境搭建
- react native 环境搭建
- react-native环境搭建
- React Native环境搭建
- React Native环境搭建
- React Native环境搭建
- ImageView组图动画轮播
- JAVA实现 剑指offer—求字符串中第一个只出现一次的字符
- Objective-C Class Clusters
- 2015ACM长春赛区网络赛C题
- 大数据爬虫基础(二)Redis在ubuntu 14.04.03下安装
- Ubuntu React Native 环境搭建
- 魔术球问题[网络流24题之4]
- 项目打包、多渠道打包和发布app的建议
- 用户验证
- LeetCode 5 : Longest Palindromic Substring ---- 最长回文
- 移植samba到安卓
- 在studio不能翻墙引入V7包的情况下需要导入V7包或者desing 包时,需要在app里面的.iml文件里面配置
- 我为什么写博客
- javascript数组去重的四种方法