facebook twitter hatena line email

「Javascript/reactnative/helloworld/react-native-cli」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索
(→‎ANDROID_SDK_ROOTが設定されてないと出るとき)
 
(同じ利用者による、間の39版が非表示)
行18: 行18:
 
</pre>
 
</pre>
  
−
===実行===
+
===Android実行===
 +
デーモン起動
 
  cd hello
 
  cd hello
−
  react-native run-android # android
+
  react-native start
−
  react-native run-ios # ios
+
別コンソールで以下実行
−
====Android実行====
+
  react-native run-android
−
=====removed in Gradle 7.0削除エラー=====
+
 
 +
Welcome to Reactと出れば、一旦起動は成功
 +
 
 +
====途中で仮想deamonが落ちたエラー====
 +
<pre>
 +
FAILURE: Build failed with an exception.
 +
 
 +
* What went wrong:
 +
Gradle build daemon disappeared unexpectedly (it may have been killed or may have crashed)
 +
</pre>
 +
FAILURE: Build failed with an exception.
 +
が出たときは、下のwrongのところに説明が書いてある。
 +
 
 +
====removed in Gradle 7.0削除エラー====
 
以下エラーが出て失敗。
 
以下エラーが出て失敗。
 
  Internal API constructor DefaultDomainObjectSet(Class<T>) has been deprecated. This is scheduled to be removed in Gradle 7.0. Please use ObjectFactory.domainObjectSet(Class<T>) instead.
 
  Internal API constructor DefaultDomainObjectSet(Class<T>) has been deprecated. This is scheduled to be removed in Gradle 7.0. Please use ObjectFactory.domainObjectSet(Class<T>) instead.
  
−
謎
+
以下実行
 +
$ react-native start
  
−
=====端末表示失敗=====
+
これ違うかも？
−
warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.
+
 
 +
====throw erが起こる====
 +
以下がコンソールに表示され、"run 'react-native start' "が端末上に出る場合
 +
<pre>
 +
events.js:292
 +
      throw er; // Unhandled 'error' event
 +
      ^
 +
 
 +
Error: EMFILE: too many open files, watch
 +
    at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:178:28)
 +
Emitted 'error' event on NodeWatcher instance at:
 +
    at NodeWatcher.checkedEmitError (node_modules/sane/src/node_watcher.js:143:12)
 +
</pre>
 +
以下実行
 +
$ react-native start
 +
 
 +
====環境エラー====
 +
以下エラーが出るときは、仮想端末が接続されてるか確認する。
 +
Failed to install the app. Make sure you have the Android development environment set up:
 +
 
 +
====端末表示失敗====
 +
以下エラーが起こるとき
 +
warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.
  
 
react-nativeを0.59から0.62に上げると、このエラーになったとの情報があるので、react-native本体バージョンを指定して作成し直す。
 
react-nativeを0.59から0.62に上げると、このエラーになったとの情報があるので、react-native本体バージョンを指定して作成し直す。
−
  react-native init hello59 --version 0.59
+
  npx react-native init hello59 --version 0.59
 +
 
 +
最終的には、これ0.62でも問題なく表示された。
  
 
参考：https://github.com/facebook/react-native/issues/29396
 
参考：https://github.com/facebook/react-native/issues/29396
 +
 +
====arm-linux-androideabi-stripエラー====
 +
以下エラーが発生する場合
 +
<pre>
 +
Starting a Gradle Daemon (subsequent builds will be faster)
 +
/Users/user1/.gradle/caches/modules-2/files-2.1/com.squareup.okhttp3/okhttp/3.12.1/dc6d02e4e68514eff5631963e28ca7742ac69efe/okhttp-3.12.1.jar: D8: Type `org.conscrypt.Conscrypt` was not found, it is required for default or static interface methods desugaring of `java.security.Provider okhttp3.internal.platform.ConscryptPlatform.getProvider()`
 +
> Task :app:transformNativeLibsWithStripDebugSymbolForDebug FAILED
 +
 +
FAILURE: Build failed with an exception.
 +
 +
* What went wrong:
 +
Execution failed for task ':app:transformNativeLibsWithStripDebugSymbolForDebug'.
 +
> A problem occurred starting process 'command '/d/src/unity-ndk/android-ndk-r16b/toolchains/arm-linux-androideabi-4.9/prebuilt/darwin-x86_64/bin/arm-linux-androideabi-strip''
 +
</pre>
 +
 +
以下が開発元不明でmacに拒否されてる場合は、許可しておく
 +
<pre>
 +
android-ndk-r21b/toolchains/aarch64-linux-android-4.9/prebuilt/darwin-x86_64/bin/aarch64-linux-android-strip
 +
android-ndk-r21b/toolchains/llvm/prebuilt/darwin-x86_64/bin/aarch64-linux-android-strip
 +
android-ndk-r21b/toolchains/llvm/prebuilt/darwin-x86_64/bin/i686-linux-android-strip
 +
android-ndk-r21b/toolchains/x86-4.9/prebuilt/darwin-x86_64/bin/i686-linux-android-strip
 +
android-ndk-r21b/toolchains/llvm/prebuilt/darwin-x86_64/bin/x86_64-linux-android-strip
 +
android-ndk-r21b/toolchains/x86_64-4.9/prebuilt/darwin-x86_64/bin/x86_64-linux-android-strip
 +
</pre>
 +
 +
====Loading from localhost:8081メッセージが出る場合====
 +
以下で8081ポートが使われてないか確認
 +
$ sudo lsof -i :8081
 +
sunproxyadminがあれば以下のようにkillする
 +
$ kill -9 [pid]
 +
 +
====java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.vmplugin.v7.Java7がでるとき====
 +
JDK14か確認して、gradleが6.2なら6.3へ
 +
 +
android/gradle/wrapper/gradle-wrapper.properties
 +
<pre>
 +
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip
 +
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip
 +
</pre>
 +
====ANDROID_SDK_ROOTが設定されてないと出るとき====
 +
以下メッセージが出るとき
 +
<pre>
 +
Could not determine the dependencies of task ':app:installDebug'.
 +
> SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at 'reactnative/hello/android/local.properties'.
 +
</pre>
 +
~/.bash_profileなどに以下などが設定されてるか確認
 +
export ANDROID_SDK_ROOT=/Users/[user1]/Library/Android/sdk
 +
 +
===ios実行===
 +
cd hello
 +
react-native start
 +
react-native run-ios
 +
 +
Welcome to Reactと出れば、一旦起動は成功
 +
 +
====bundle周りのエラー====
 +
以下エラーが出るとき
 +
make sure you're runing a packager server or have included a .jsbundle file in you application bundle.
 +
bundleId周りでエラーが起きてるので、そこらへんを確認する
 +
 +
===helloworldを出す===
 +
App.js
 +
<pre>
 +
import React from 'react';
 +
import { Text, View } from 'react-native';
 +
 +
const HelloWorldApp = () => {
 +
  return (
 +
    <View
 +
      style={{
 +
        flex: 1,
 +
        justifyContent: "center",
 +
        alignItems: "center"
 +
      }}>
 +
      <Text>Hello, world!</Text>
 +
    </View>
 +
  )
 +
}
 +
export default HelloWorldApp;
 +
</pre>
 +
runするとandroid、iosともに、helloworldが出た。
 +
 +
reloadでリアルタイム変更できないが・・
  
 
===参考===
 
===参考===
 
https://snova301.hatenablog.com/entry/2019/05/05/231232
 
https://snova301.hatenablog.com/entry/2019/05/05/231232

2020年10月9日 (金) 18:32時点における最新版

react-native-cliを使ったhelloworld

$ react-native init hello

以下構成で作成される 

App.js
__tests__ [dir]
android [dir]
app.json
babel.config.js
index.js
ios [dir]
metro.config.js
node_modules [dir]
package.json
yarn.lock

Android実行

デーモン起動 

cd hello
react-native start

別コンソールで以下実行 

react-native run-android

Welcome to Reactと出れば、一旦起動は成功

途中で仮想deamonが落ちたエラー

FAILURE: Build failed with an exception.

* What went wrong:
Gradle build daemon disappeared unexpectedly (it may have been killed or may have crashed)

FAILURE: Build failed with an exception. が出たときは、下のwrongのところに説明が書いてある。

removed in Gradle 7.0削除エラー

以下エラーが出て失敗。 

Internal API constructor DefaultDomainObjectSet(Class<T>) has been deprecated. This is scheduled to be removed in Gradle 7.0. Please use ObjectFactory.domainObjectSet(Class<T>) instead.

以下実行 

$ react-native start

これ違うかも？

throw erが起こる

以下がコンソールに表示され、"run 'react-native start' "が端末上に出る場合 

events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: EMFILE: too many open files, watch
    at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:178:28)
Emitted 'error' event on NodeWatcher instance at:
    at NodeWatcher.checkedEmitError (node_modules/sane/src/node_watcher.js:143:12)

以下実行 

$ react-native start

環境エラー

以下エラーが出るときは、仮想端末が接続されてるか確認する。 

Failed to install the app. Make sure you have the Android development environment set up:

端末表示失敗

以下エラーが起こるとき 

warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.

react-nativeを0.59から0.62に上げると、このエラーになったとの情報があるので、react-native本体バージョンを指定して作成し直す。 

npx react-native init hello59 --version 0.59

最終的には、これ0.62でも問題なく表示された。

参考：https://github.com/facebook/react-native/issues/29396

arm-linux-androideabi-stripエラー

以下エラーが発生する場合 

Starting a Gradle Daemon (subsequent builds will be faster)
/Users/user1/.gradle/caches/modules-2/files-2.1/com.squareup.okhttp3/okhttp/3.12.1/dc6d02e4e68514eff5631963e28ca7742ac69efe/okhttp-3.12.1.jar: D8: Type `org.conscrypt.Conscrypt` was not found, it is required for default or static interface methods desugaring of `java.security.Provider okhttp3.internal.platform.ConscryptPlatform.getProvider()`
> Task :app:transformNativeLibsWithStripDebugSymbolForDebug FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:transformNativeLibsWithStripDebugSymbolForDebug'.
> A problem occurred starting process 'command '/d/src/unity-ndk/android-ndk-r16b/toolchains/arm-linux-androideabi-4.9/prebuilt/darwin-x86_64/bin/arm-linux-androideabi-strip''

以下が開発元不明でmacに拒否されてる場合は、許可しておく 

android-ndk-r21b/toolchains/aarch64-linux-android-4.9/prebuilt/darwin-x86_64/bin/aarch64-linux-android-strip
android-ndk-r21b/toolchains/llvm/prebuilt/darwin-x86_64/bin/aarch64-linux-android-strip
android-ndk-r21b/toolchains/llvm/prebuilt/darwin-x86_64/bin/i686-linux-android-strip
android-ndk-r21b/toolchains/x86-4.9/prebuilt/darwin-x86_64/bin/i686-linux-android-strip
android-ndk-r21b/toolchains/llvm/prebuilt/darwin-x86_64/bin/x86_64-linux-android-strip
android-ndk-r21b/toolchains/x86_64-4.9/prebuilt/darwin-x86_64/bin/x86_64-linux-android-strip

Loading from localhost:8081メッセージが出る場合

以下で8081ポートが使われてないか確認 

$ sudo lsof -i :8081

sunproxyadminがあれば以下のようにkillする 

$ kill -9 [pid]

java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.vmplugin.v7.Java7がでるとき

JDK14か確認して、gradleが6.2なら6.3へ

android/gradle/wrapper/gradle-wrapper.properties 

-distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip

ANDROID_SDK_ROOTが設定されてないと出るとき

以下メッセージが出るとき 

Could not determine the dependencies of task ':app:installDebug'.
> SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at 'reactnative/hello/android/local.properties'.

~/.bash_profileなどに以下などが設定されてるか確認 

export ANDROID_SDK_ROOT=/Users/[user1]/Library/Android/sdk

ios実行

cd hello
react-native start
react-native run-ios

Welcome to Reactと出れば、一旦起動は成功

bundle周りのエラー

以下エラーが出るとき 

make sure you're runing a packager server or have included a .jsbundle file in you application bundle.

bundleId周りでエラーが起きてるので、そこらへんを確認する

helloworldを出す

App.js 

import React from 'react';
import { Text, View } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default HelloWorldApp;

runするとandroid、iosともに、helloworldが出た。

reloadでリアルタイム変更できないが・・

参考

https://snova301.hatenablog.com/entry/2019/05/05/231232

「http://wiki.nonip.net/index.php?title=Javascript/reactnative/helloworld/react-native-cli&oldid=12145」から取得