Javascript/reactnative/helloworld/react-native-cli

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