Linux React-Native Android开发环境搭建
参考:http://wiki.jikexueyuan.com/project/react-native/GettingStarted.html
1. 安装nvm
参考:https://github.com/creationix/nvm#installation
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash
测试nvm命令: nvm -version
2. 安装linuxbrew, homebrew for linux;
参考:http://brew.sh/linuxbrew/
git clone https://github.com/Homebrew/linuxbrew.git ~/.linuxbrew
Add to your .bashrc or .zshrc:
export PATH="$HOME/.linuxbrew/bin:$PATH"export MANPATH="$HOME/.linuxbrew/share/man:$MANPATH"export INFOPATH="$HOME/.linuxbrew/share/info:$INFOPATH"
brew基本操作:
% brew search <pkg> # 搜索包
% brew install <pkg> # 安装包
% brew uninstall <pkg> # 删除包
% brew list <pkg> # 列出 pkg 的文件
% brew info <pkg> # 关于 pkg 的信息
% brew update # 更新包
% brew upgrade <pkg> # 升级包
3. 安装node;
nvm install node && nvm alias default node
这里要等 一段时间,下载会有点慢;
4. 安装watchman和flow
$ brew install watchman
$ brew install flow
pywatchman/bser.c:31:20: fatal error: Python.h: No such file or directory
#include <Python.h>
^
compilation terminated.
error: command '/usr/bin/gcc-4.8' failed with exit status 1
make[1]: *** [py-build] Error 1
make[1]: *** Waiting for unfinished jobs....
make[1]: Leaving directory `/tmp/watchman20151026-14785-1hs3pkk/watchman-3.9.0'
make: *** [all] Error 2
READ THIS: https://github.com/Homebrew/linuxbrew/blob/master/share/doc/homebrew/Troubleshooting.md#
一看就是没装python,安装python sudo apt-get installpython-dev
装flow又报错了,又是缺少东西; 到http://flowtype.org/网站看看这个flow是什么东西(需要饭枪)
Flow is a static type checker, designed to find type errors in JavaScript programs:
https://github.com/facebook/flow, 原来是 依懒ocaml libbelf-dev。执行下面操作:
sudo apt-get install ocaml libelf-dev
http://flowtype.org/docs/getting-started.html
mv hh_shared.o hack/heap/hh_shared.o
ocamlopt -ccopt -DNO_LZ4 -c hack/hhi/hhi_elf.c
+ ocamlopt -ccopt -DNO_LZ4 -c hack/hhi/hhi_elf.c
hack/hhi/hhi_elf.c:26:18: fatal error: gelf.h: No such file or directory
#include <gelf.h>
^
compilation terminated.
Command exited with code 2.
make: *** [build-flow-native-deps] Error 10
READ THIS: https://github.com/Homebrew/linuxbrew/blob/master/share/doc/homebrew/Troubleshooting.md#troubleshooting
5. 运行demo
首先切换到你想要的目录下,依次执行以下命令
$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject/
运行项目
$ react-native run-android
wv@wv-ThinkPad-SL ~/code $ react-native init react_native_android_test
This will walk you through creating a new React Native project in /home/wv/code/react_native_android_test
Installing react-native package from npm...
^[^[Setting up new React Native app in /home/wv/code/react_native_android_test
To run your app on iOS:
Open /home/wv/code/react_native_android_test/ios/react_native_android_test.xcodeproj in Xcode
Hit Run button
To run your app on Android:
Have an Android emulator running, or a device connected
cd /home/wv/code/react_native_android_test
react-native run-android
如果你react-natve run-android之后看到一个红色列表,就是因为没有启动server, React-native会在电脑上启动一个server,
你在手机上跑的应用就是一个客户端,启动server如下:
在命令行启动 Debug Server 即可:在工程目录下
react-native start
还有就是要配置一下电脑的IP,你的电脑必须我你的手机在一个局域网里面。
按Menu键(或者摇一摇)出现菜单,选择Dev sttings -> Debug server host for device 填写你电脑的IP
再重新选择reload JS看看。
index.android.js改一行代码看看:
var react_native_android_test = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
我的第一个应用
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
});
浏览器React Developer Tools
Chrom: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related
FireFox: https://addons.mozilla.org/en-US/firefox/addon/react-devtools/
React_Server启动报错:
React packager ready.
ERROR A non-recoverable condition has triggered. Watchman needs your help!
The triggering condition was at timestamp=1447577488: inotify-add-watch(/home/wv/work/qianmi/d2papp/node_modules/bufferutil/build/Release/.deps/Release) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
All requests will continue to fail with this message until you resolve
the underlying problem. You will find more information on fixing this at
https://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch
{"watchmanResponse":{"version":"3.9.0","error":"A non-recoverable condition has triggered. Watchman needs your help!\nThe triggering condition was at timestamp=1447577488: inotify-add-watch(/home/wv/work/qianmi/d2papp/node_modules/bufferutil/build/Release/.deps/Release) -> 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=1447577488: inotify-add-watch(/home/wv/work/qianmi/d2papp/node_modules/bufferutil/build/Release/.deps/Release) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
All requests will continue to fail with this message until you resolve
the underlying problem. You will find more information on fixing this at
https://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch
at ChildProcess.<anonymous> (/home/wv/code/react_native_android_test/node_modules/react-native/node_modules/sane/node_modules/fb-watchman/index.js:202:17)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at maybeClose (internal/child_process.js:818:16)
at Socket.<anonymous> (internal/child_process.js:319:11)
at emitOne (events.js:77:13)
at Socket.emit (events.js:169:7)
at Pipe._onclose (net.js:469:12)
See http://facebook.github.io/react-native/docs/troubleshooting.html
for common problems and solutions.
主要问题:The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
Google: https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers 解决
$ cat /proc/sys/fs/inotify/max_user_watches
8192
$ sudo sysctl fs.inotify.max_user_watches=524288
[sudo] password for wv:
fs.inotify.max_user_watches = 524288
$ sudo sysctl -p
$ cat /proc/sys/fs/inotify/max_user_watches
524288
永久修改:
$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
fs.inotify.max_user_watches=524288
$ sudo sysctl -p
fs.inotify.max_user_watches = 524288
watchman shutdown-server
brew update
brew reinstall watchman
上面重装应该不是必需的,要关闭命令行重新打开,再进入工程目录 下
react-native start
相关推荐
执行命令brew install php72,出现下图即为安装成功;需要按照提示添加环境变量;重新加载配置|重启|停止|退出 nginxnginx -s reload|reopen|stop|quit
由于mac自带brew,所以mac下安装nginx相对比较简单。详细步骤请继续阅读:。由于我的brew版本比较旧,所以进行了更新。此处需要漫长的等待...可通过以下命令查看nginx信息,如安装路径等