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


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com