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
yarn start
npx react-native run-android # android

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

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.

以下実行

$ yarn 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) 

以下実行

$ yarn 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.

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]

ios実行

cd hello
yarn start
react-native run-ios

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

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