Day35 There was a problem loading the requested app.

今日からアプリ作り開始!

App.js はここからスタート

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

いろいろ思い出しながらやっていきたいと思います。Day 9 – 27 までやっていたモックアプリや、昨日見てた動画とかを参考にしていきます。

昨日見てた動画
How to Setup Push Notifications with React Native

昨日ちょっと動画を見ていて気になったことがありました。最初のファイルが index.ios.js と index.android.js とかになってて???ってなりました。
これは少し調べたら出てきました。

@ozaki25
2017年10月06日に更新
ReactNative0.49からreact-native initで生成されるファイルの構成が変わった

ReactNative0.49からreact-native initで生成されるファイルの構成が変わった - Qiita 背景 react-native initしたら構成が変わってた react-nativeのバージョンが0.48から0.49に上がっていたのでそこでのアップデートのよう 変更内容 変更前 index.andro...
 qiita.com

変更前

index.android.jsとindex.ios.jsがありそれぞれHelloWorld的な画面が用意されていた
以下はindex.ios.js
androidもほぼ同じ

変更後

二つのファイルがほとんど同じで冗長だったのが(App.jsに)共通化された

まとめ

変更前の構成で作ったアプリもこの形式に寄せた方が当然だけどDRY
OS固有の処理が出てきたらそのときに各OS用のファイルを作る感じでよさそう

ということでした。なるほど。
今日は、App.js から一覧表示用の処理を呼ぶところまでやろうと思います。

最初にモックアプリでやったように .eslintrc ファイルを作成します。

{
  "extends": "rallycoding",
  "rules": {
    "arrow-body-style": 0
  }
}

モックアプリを参考に新しいディレクトリとファイルを作成します。

/screens/Reminders.js を追加

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

class Reminders extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>This is Remindalerm!</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});
  
export default Reminders;

App.js のほうも修正します。

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

import Reminders from './screens/Reminders';

export default function App() {
  return (
    <View style={styles.container}>
      <Reminders />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

expo を起動してみます。

$ cd Remindarlerm
$ expo start

画面を開くと

There was a problem loading the requested app.

あれーー?

@kaba
2019年07月10日に更新
expoで、there was a problem loading the requested appと白い画面に表示されるエラー

expoで、there was a problem loading the requested appと白い画面に表示されるエラー - Qiita 単純にシュミレーターの中にインストールされたexpoクライアントで、ログインをしていないだけ。 解決方法 Go back to Expo Homeをタップ profileをタップ Sign inしよう。 解決! ...
 qiita.com

$ expo start -c
$ expo ios

を実行すると正常なアプリが表示される。

そうなので、いったん command + Q で SImulator を閉じて、terminal のほうも Ctrl + c で停止して、
expo start -c をやってみます。

$ expo start -c

そうすると

LOGGED IN AS 1YAAN
INFO 10:37 Starting Metro Bundler on port 19001.
INFO 10:37 Your JavaScript transform cache is empty, rebuilding (this may take a minute).
INFO 10:37 Tunnel ready.

あーなるほどねーキャッシュクリアね。
Run on iOS simulator を起動

INFO 10:41 Opening iOS simulator
INFO 10:41 Booting device in iOS simulator…
ERROR 10:41 Error running `xcrun simctl boot 1A79B99D-5DC6-4AA0-B9A0-C29DE490B191`: An error was encountered processing the command (domain=com.apple.CoreSimulator.SimError, code=164):
Unable to boot device in current state: Booted
ERROR 10:41 There was a problem booting a device in iOS Simulator. Quit Simulator, and try again.
ERROR 10:41 Error installing or running app. Error: xcrun exited with non-zero code: 164

あれーーなんどやっても ERROR に
expo ios のほうも試してみよう

$ expo ios 

してみると、すぐに iOS simulator が起動しました。
だがしかし!!

There was a problem loading the requested app.

くっそーーー!次やってみよう!

Expoでのプロジェクト作成 / react nativeを使ったアプリ開発|teratail 前提・実現したいことExpoでプロジェクトの作成がしたいです。どなたか教えていただけないでしょうか。 React native初心者です。Expoでプロジェクトの作成ができません。 Windows PowerShell を使っています。 発生している問題・エラーメ
 teratail.com

expo startの前にTestProjectのディレクトリに入って、npm installを実行してみてください

ちょっと試してみましたが、ダメそう!

There is a new version of expo-cli available (3.0.9).
You are currently using expo-cli 2.21.2
Run `npm install -g expo-cli` to get the latest version

起動時に出てくるこれかなー?

$ npm install -g expo-cli
$ npm install

下のはモックアプリ作っているときに散々言われたので一応念のために実行してみました。

found 11 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

と指摘されたので

$ npm audit fix

終わったので

$ expo start

すると…

できなーーーーーーーい!

いったんこの現象を回避できるのかどうか、他のプロジェクトを1つ作って試してみたいと思います(T_T)

今日の分のソースは動かなかったけどいったんコミット。

今日はおしまい!

解決編↓

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください