ubuntu下折腾ReactNative

折腾一下RN
我用的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
react-native-cli@1.0.0 /home/ss/Soft/node-v4.5.0/lib/node_modules/react-native-cli
├── semver@5.3.0
├── minimist@1.2.0
├── chalk@1.1.3 (escape-string-regexp@1.0.5, supports-color@2.0.0, ansi-styles@2.2.1, 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, winston@0.8.3, utile@0.2.1)
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
react@15.2.1 node_modules/react
├── object-assign@4.1.0
├── loose-envify@1.2.0 (js-tokens@1.0.3)
└── fbjs@0.8.4 (immutable@3.8.1, ua-parser-js@0.7.10, promise@7.1.1, isomorphic-fetch@2.2.1, core-js@1.2.7)
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] <START> Building Dependency Graph
[3:32:05 PM] <START> Crawling File System
[Hot Module Replacement] Server listening on /hot

React packager ready.

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

默认8081端口,记得如果开了防火墙,要把这个端口allow使能,
[3:32:38 PM] request:/index.android.bundle?platform=android这句打印出来说明我的请求上来了!

7.然后编译启动android项目react-native run-android,如果提示ANDROID_HOME未指定,sdk路径无法定位,就看看环境变量是否配置过,也就是文章的开头的准备工作!
然后用androidstudio打开android项目,会出现一些奇怪的问题,gradle脚本有些类找不到一直编译不过,后来回头看网上的说明,发现少做了一步, watchman这东西没安装
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] <START> request:http://10.42.0.1:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false
[11:25:37 PM] <START> find dependencies
transformed 631/631 (100%)
[11:26:08 PM] <END>   find dependencies (31246ms)
[11:26:14 PM] <END>   request:http://10.42.0.1:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false (37718ms)

然后JS服务器返回页面给客户端

终于这个hello world!运行起来了

如果出现什么问题,RN的github上都有一些常见的热议问题,可以去那里寻找答案!
https://github.com/facebook/react-native/issues