Linux教程網 >> Linux基礎 >> 關於Linux >> ubuntu下折騰ReactNative

ubuntu下折騰ReactNative

日期：2017/3/1 11:57:16 编辑：關於Linux

我用的ubuntu開發環境
前提:java,安卓的環境確保已經搭好了,現在研究RN,只需要配置NodeJS環境
准備工作,android sdk環境變量配置,後面android項目編譯的時候會用到 !
vim ~/.bashrc

export ANDROID_HOME=/home/shone/Soft/sdk
export PATH=${ANDROID_HOME}/platform-tools:$PATH
export PATH=${ANDROID_HOME}/tools:$PATH

1-官方下載穩定版本https://nodejs.org/
2-Linux環境下載壓縮包,解壓出來就ok了,不需要windows下點擊安裝啥的

ss@Dell:~/Soft/node-v4.5.0$ ls
bin  CHANGELOG.md  etc  include  lib  LICENSE  README.md  share

解壓後我把bin目錄加入到環境變量中了~/.bashrc

export NODE_HOME=/home/shone/Soft/node-v4.5.0
export PATH=${NODE_HOME}/bin:$PATH

3-安裝react-native,建立軟鏈接

ss@Dell:~/Soft/node-v4.5.0/bin$ ./npm install -g react-native-cli  
/home/ss/Soft/node-v4.5.0/bin/react-native -> /home/ss/Soft/node-v4.5.0/lib/node_modules/react-native-cli/index.js
[email protected] /home/ss/Soft/node-v4.5.0/lib/node_modules/react-native-cli
├── [email protected]
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
ss@Dell:~/Soft/node-v4.5.0/bin$ ls
node  npm  react-native

多了一個文件react-native

測試開始

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

1-初始化項目

ss@Dell:~/Soft/node-v4.5.0/bin$ ./react-native init reactN
/usr/bin/env: node: No such file or directory

2-提示node找不到
然後我的地一個做法是把node-v4.5.0目錄移動到了/user/local/bin下面,這樣shell執行的時候應該找的到吧
可是還是出現上面的錯誤提示
最後我只好用軟鏈接了

sudo ln -s /usr/local/bin/node-v4.5.0/bin/node /usr/bin/node

3-找不到npm

ss@Dell:/usr/local/bin/node-v4.5.0/bin$ ./react-native init pro_react
This will walk you through creating a new React Native project in /usr/local/bin/node-v4.5.0/bin/pro_react
Installing react-native package from npm...

/bin/sh: 1: npm: not found

`npm install --save --save-exact react-native` failed

同樣用軟鏈接解決

sudo ln -s /usr/local/bin/node-v4.5.0/bin/npm /usr/bin/npm

4-初始化工程

ss@Dell:/usr/local/bin/node-v4.5.0/bin$ ./react-native init pro_react
prompt: Directory pro_react already exists. Continue?:  (no) yes
This will walk you through creating a new React Native project in /usr/local/bin/node-v4.5.0/bin/pro_react
Installing react-native package from npm...
Setting up new React Native app in /usr/local/bin/node-v4.5.0/bin/pro_react
[email protected] node_modules/react
├── [email protected]
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
To run your app on iOS:
   cd /usr/local/bin/node-v4.5.0/bin/pro_react
   react-native run-ios
   - or -
   Open /usr/local/bin/node-v4.5.0/bin/pro_react/ios/pro_react.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), or a device connected
   cd /usr/local/bin/node-v4.5.0/bin/pro_react
   react-native run-android

5-好了,模板已經建立好了,我把node目錄重新移動到了我的所有軟件安裝的目錄,便於管理,記得重新ln軟連接,看看模板目錄,比較整潔

ss@Dell:~/Soft/node-v4.5.0/bin/pro_react$ ls
android  index.android.js  index.ios.js  ios  node_modules  package.json

6-啟動項目

ss@Dell:~/Soft/node-v4.5.0/bin/RN_project$ ../react-native start
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  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/ss/Soft/node-v4.5.0/bin/RN_project 

[3:32:05 PM]  Building Dependency Graph
[3:32:05 PM]  Crawling File System
[Hot Module Replacement] Server listening on /hot

React packager ready.

[3:32:38 PM]  request:/index.android.bundle?platform=android
[3:32:38 PM]  find dependencies
[3:33:18 PM]    Crawling File System (73022ms)
[3:33:18 PM]  Building in-memory fs for JavaScript
[3:33:19 PM]    Building in-memory fs for JavaScript (972ms)
[3:33:19 PM]  Building in-memory fs for Assets
[3:33:20 PM]    Building in-memory fs for Assets (736ms)
[3:33:20 PM]  Building Haste Map
[3:33:20 PM]  Building (deprecated) Asset Map
[3:33:21 PM]    Building (deprecated) Asset Map (190ms)
[3:33:21 PM]    Building Haste Map (537ms)
[3:33:21 PM]    Building Dependency Graph (75290ms)
...

默認8081端口,記得如果開了防火牆,要把這個端口allow使能,
[3:32:38 PM] request:/index.android.bundle?platform=android這句打印出來說明我的請求上來了!
vcWxvtPQ0KnA4NXSsru1vdK71rGx4NLrsru5/Sy688C0u9jNt7+0zfjJz7XEy7XD9yy3os/WydnX9sHL0ruyvSwgd2F0Y2htYW7V4rarzvfDu7Cy17A8YnIgLz4NCjxhIGhyZWY9"https://facebook.github.io/watchman/docs/install.html">https://facebook.github.io/watchman/docs/install.html

1>.安裝依賴

$ sudo apt-get install autoconf automake python-dev

2>.安裝 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

沒什麼問題,再重新創建一個RN項目
運行 , 提示編譯版本23.0.1找不到(默認官方用的這個編譯工具版本),我的as用的是23.0.3,我看網上多數采取的做法是下載23.0.1版本,那我也跟著下了這個版本,然後再次運行:

這個任務compileDebugAidl執行失敗,網上說編譯工具兼容性的問題

得了,我還是用我的23.0.3吧,用androidstudio打開android項目,改動一處,就編譯成功了~

compileSdkVersion 23
buildToolsVersion "23.0.3"

新問題又出現了,安裝不了

最後面給了一個setup網址,定位到這個網址,全是一些問題匯總,一個hello world!工程可不是鬧著玩的~~~
https://facebook.github.io/react-native/docs/troubleshooting.html
出了問題,一定要仔細看提示

定位Gradle版本問題

classpath 'com.android.tools.build:gradle:1.2.3'

然後編譯

BUILD SUCCESSFUL

Total time: 2 mins 13.149 secs

This build could be faster, please consider using the Gradle Daemon: http://gradle.org/docs/2.4/userguide/gradle_daemon.html
Starting the app on phone0125 (/home/shone/Soft/sdk/platform-tools/adb -s phone0125 shell am start -n com.awesomeproject/.MainActivity)...
Starting: Intent { cmp=com.awesomeproject/.MainActivity }

出現這個不用怕,百度上面那串東西,這裡看Logcat輸出就行了

然後
搜到了這個兄弟提的問題
http://stackoverflow.com/questions/38942566/react-native-0-31-could-not-get-batchedbridge-error

If not shake the device to get the dev menu, click "Dev Settings" / "Debug server host & port for device".

這裡先確定JS server(服務器)在運行

ss@Dell:~/Soft/node-v4.5.0/bin/AwesomeProject$ react-native start
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  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
  ...

然後在辣眼睛的紅色主界面,shake the device to get the dev menu,意思是搖動手機,彈出菜單設置界面

選擇最後一項Dev Settings——>Debugging server host & port for device

好了,設置服務器的地址和端口
我用的局域網:
10.42.0.1:8081
然後退到主界面RELOAD重新加載…
此時,可以在服務端的終端上看見輸出日志,請求開始-請求結束,花了多長時間

[11:25:37 PM]  request:http://10.42.0.1:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false
[11:25:37 PM]  find dependencies
transformed 631/631 (100%)
[11:26:08 PM]    find dependencies (31246ms)
[11:26:14 PM]    request:http://10.42.0.1:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false (37718ms)

然後JS服務器返回頁面給客戶端

終於這個hello world!運行起來了