Ubuntu React Native 环境搭建

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-x64
export PATH=$NODE_HOME/bin:$PATH

在终端输入 node -v 如下出现版本号则说明安装成功

djh@djh-All-Series:~$ node -v
v4.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/HelloWorld
Installing 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 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":"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 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 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_instances

echo 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_events

echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches

watchman 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-android
JS 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 就重新加载了.然后就变成下面的了

####后续
将学习运行在真是的手机设备中.