Ubuntu React Native環境構築

Ubuntu React Native環境構築

<ブロッククオート

私の環境は、Ubuntu 64-bit 14.0.4 です。

node.jsのインストール

プロセス

• 1. nodeのWebサイトにアクセスし 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...

作成に時間がかかるので、気長に待ちましょう。

地獄の世界を走れ

プロセス

djh@djh-All-Series:~/ReactNativeProject$ cd HelloWorld/
djh@djh-All-Series:~/ReactNativeProject/HelloWorld$ react-native start

ERROR Packager can't listen on port 8081

質問:

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
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 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
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.exit (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)

1 このエラーが表示された場合、すでにサービスが実行されているので、まずそれをシャットダウンしてください。

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

2. この問題が発生した場合、次のように解決してください。 ターミナルに入力します。

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

公式サイトによると、これは監視員の制限か何からしい、詳しくは++https://facebook.github.io/watchman/docs/install.html#system-specific-preparation++を参照のこと

3. 初めてなので、何もわからず、ここで待っていたのですが、サービスが立ち上がると、新しい端末を開く必要があります。このディレクトリからマシンを動かすことができます。これは仮想マシン Genymotion

アンドロイド端末にapkを実行する

プロセス

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

* DeviceException: No connected devices!
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

質問:

1. アンドロイド環境とビルドツールを最初に設定するのがベストで、一般的には23.0.1が必要です
++export ANDROID_HOME=/home/djh/djh/adt-bundle-linux-x86_64-20140702/sdk++
持っていない場合は、sdk Managerを使用してダウンロードしてください。そうでないと、リソースが見つからないという問題が多発します。

2. 初回実行は少し時間がかかります。

class HelloWorld extends Component {
  render() {
    return (
      <View style={styles.container}>
          <Text style={styles.reply}>
         Hello world
        </Text>
      </View>
    );
  }
}

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を選択すると、リロードされます。すると、次のようになります。

#### フォローアップ
実際のモバイル端末で学習を実行する。