Expoのエラーを解決したい

Expoを用いてアプリ開発をしてみようと思いこちらの記事を参考に始めてみたのですが、React Navigationを使用したところ以下のエラーが出てしまいました。
自分でも調べてみたのですが、解決方法がよくわからなかったのでご教示していただけないでしょうか。

error
1Error: The component for route 'Main' must be a React component. For example:
2
3import MyScreen from './MyScreen';
4...
5Main: MyScreen,
6}
7
8You can also use a navigator:
9
10import MyNavigator from './MyNavigator';
11...
12Main: MyNavigator,
13}

以下がソースコードです。

App.js

App
1import React, {Component} from 'react';
2import { createStackNavigator } from 'react-navigation-stack';
3
4import Main from './screens/Main';
5import Push from './screens/Push';
6import Modal from './screens/Modal';
7
8
9
10const MainNavigation = createStackNavigator(
11  {
12    Main: { screens: Main },
13    Push: { screens: Push },
14  },
15  {initialRouteName: 'Main', mode: 'card', headerMode: 'none'}
16)
17const NestNavigation = createStackNavigator(
18  {
19    MainNavigation: { screens: MainNavigation },
20    Modal: { screens: Modal },
21  },
22  {initialRouteName: 'MainNavigation', mode: 'modal', headerMode: 'none'},
23)
24
25
26type Props = {};
27export default class App extends Component<Props> {
28  render() {
29    return (
30      <NestNavigation />
31    );
32  }
33}

Main
1import React, {Component} from 'react';
2import { Container, View, Header, Left, Body, Right, Button, Title, Text } from 'native-base';
3
4type Props = {};
5export default class Main extends Component<Props> {
6    push = () => {
7        const { navigation } = this.props
8        navigator.navigate('Push')
9    }
10    modal = () => {
11        const { navigation } = this.props
12        navigation.navigate('Modal')
13    }
14    render() {
15        return (
16            <Container>
17                <Header>
18                    <Left />
19                    <Body>
20                        <Title>メイン</Title>
21                    </Body>
22                    <Right />
23                </Header>
24                <View>
25                    <Button small iconRight transparent primary onPress={this.push}>
26                        <Text>プッシュ通知</Text>
27                    </Button>
28                </View>
29                <View>
30                    <Button small iconRight transparent primary onPress={this.modal}>
31                        <Text>モーダル表示</Text>
32                    </Button>
33                </View>
34            </Container>
35        );
36    }
37}

Push
1import React, {Component} from 'react';
2import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
3
4
5type Props = {};
6export default class Push extends Component<Props> {
7    render() {
8        return (
9            <Container>
10                <Header>
11                    <Left>
12                        <Button transparent onPress={() => this.props.navigation.goBack()}>
13                            <Icon name='arrow-back' />
14                        </Button>
15                    </Left>
16                    <Body>
17                        <Title>プッシュ</Title>
18                    </Body>
19                    <Right />
20                </Header>
21            </Container>
22        );
23    }
24}

Modal
1import React, {Component} from 'react';
2import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
3
4
5type Props = {};
6export default class Modal extends Component<Props> {
7    render() {
8        return (
9            <Container>
10                <Header>
11                    <Left>
12                        <Button transparent onPress={() => this.props.navigation.goBack()}>
13                            <Icon name='close' />
14                        </Button>
15                    </Left>
16                    <Body>
17                        <Title>モーダル</Title>
18                    </Body>
19                    <Right />
20                </Header>
21            </Container>
22        );
23    }
24}

行動規範の内容に同意します

回答1件

ベストアンサー

screensをscreenに変えてみるとどうでしょうか？

createStackNavigator(
  {
    Main: { screens: Main },
    Push: { screens: Push },
  },

↓

createStackNavigator(
  {
    Main: { screen: Main },
    Push: { screen: Push },
  },

投稿2020/02/17 07:38

dorarep

総合スコア102

yusuke22

2020/02/17 07:40

回答ありがとうございます。変更したところ、以下のエラーが出ました。 Invariant Violation: The navigation prop is missing for this navigator. In react-navigation v3 and v4 you must set up your app container directly. More info: https://reactnavigation.org/docs/en/app-containers.html This error is located at: in Navigator (at App.js:29) in App (at withExpoRoot.js:26) in RootErrorBoundary (at withExpoRoot.js:25) in ExpoRoot (at renderApplication.js:40) in RCTView (at AppContainer.js:101) in DevAppContainer (at AppContainer.js:115) in RCTView (at AppContainer.js:119) in AppContainer (at renderApplication.js:39)

dorarep

2020/02/17 07:50

export default class App extends Component<Props>の定義を消して、下記のようにしてみるとどうでしょうか？ import { createStackNavigator, createAppContainer } from 'react-navigation-stack'; ... const App = createAppContainer(NestNavigation); export default App;

yusuke22

2020/02/17 07:58

変更したところ、以下のエラーが出ました。 TypeError: (0, _reactNavigationStack.createAppContainer) is not a function. (In '(0, _reactNavigationStack.createAppContainer)(NestNavigation)', '(0, _reactNavigationStack.createAppContainer)' is undefined)

yusuke22

2020/02/17 08:03

以下のように変更したところ、エラーが消えて実行されました。 import { createStackNavigator } from 'react-navigation-stack'; import { createAppContainer } from 'react-navigation';

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Expoのエラーを解決したい

関連した質問