React navigation v3.0 バージョンアップ、エラー対策 before → after

2018年11月にReact Navigation がバージョンアップしました。

それに伴い、エラーが出ているようです。

Invariant Violation: The navigation prop is missing for this navigator. In react-navigation 3 youmust set up your app container directly.

公式文書です。

困っている方々のために、参考記事と、私の拙いコードを記します。　

　
　

こちらの動画は開発中の弁膜症アプリです。　もともと画面遷移は、
createStackNavigator と、createBottomTabnavigator を用いておりました。　

　

　

修正前のcode:

App.js

import React, {Component} from 'react';
import { StyleSheet, Text, View} from 'react-native';
import { Button, Icon } from 'react-native-elements';
import {createStackNavigator, createBottomTabNavigator} from 'react-navigation';
import HomeScreen from './HomeScreen';
import EchoScreen from './EchoScreen';
import GuidelineScreen from './GuidelineScreen';
import AstreatScreen from './as/AstreatScreen';
import Severe2Screen from './ar/Severe2Screen';


const App = createStackNavigator({
  Home:           {screen: HomeScreen}, 
  Echo:           {screen: EchoScreen},
  Guideline:      {screen: GuidelineScreen},
  Severe2:        {screen: Severe2Screen},
  Astreat:        {screen: AstreatScreen},

}, {
    navigationOptions: {
      title: '弁膜症 アプリ',
      headerStyle: { backgroundColor : 'rgb(114,95,70)'},
      headerTitleStyle: {color: '#fff'},
      headerTintColor: "#fff",
      headerBackTitle: null,
      headerTitleStyle: {
        width: '92%',
        textAlign: 'center',
       },
    },
  });

const Echo = createStackNavigator({
    Echo:           {screen: EchoScreen},
});

const Guideline = createStackNavigator({
    Guideline:      {screen: GuidelineScreen},
});
  
  

export default createBottomTabNavigator({
  App:  {
    screen: App, 
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: () => (
        <Icon 
              name= {"home"} 
              size={22} 
        />
      )
    }     
  },
  Echo:  {
    screen: Echo,
    navigationOptions: {
      tabBarIcon: () => (
        <Icon 
          name= {"highlight"} 
          size={22} 
        />
      )
    }     
  },
  Guideline:{
    screen: Guideline,
    navigationOptions: {
      tabBarIcon: () => (
        <Icon name="import-contacts" size={20} />
      )
    }     
  }

}, {
tabBarOptions: { 

  activeTintColor: 'black', 
  inactiveTintColor: 'black',
  activeBackgroundColor: '#fff',
  inactiveBackgroundColor: '#fff',
  labelStyle: {} }
});
      

修正後のコード

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import LottieView from 'lottie-react-native';
import Anime from './AnimateScreen';
import { Button, Icon } from 'react-native-elements';
import {createStackNavigator, createBottomTabNavigator, createAppContainer} from 'react-navigation';

import HomeScreen from './HomeScreen';
import EchoScreen from './EchoScreen';
import GuidelineScreen from './GuidelineScreen';


import AstreatScreen from './as/AstreatScreen';

import Severe2Screen from './ar/Severe2Screen';

const App = createStackNavigator({

  Home:           {screen: HomeScreen}, 
  Echo:           {screen: EchoScreen},
  Guideline:      {screen: GuidelineScreen},
  Astreat:        {screen: AstreatScreen},
  Severe2:        {screen: Severe2Screen},

}, {
  defaultNavigationOptions: {
    title: '弁膜症 アプリ',
    headerStyle: { backgroundColor : 'rgb(114,95,70)'},
    headerTitleStyle: {color: '#fff'},
    headerTintColor: "#fff",
    headerBackTitle: null,
    headerTitleStyle: {
      width: '92%',
      textAlign: 'center',
     },
  },
});



const Echo = createStackNavigator({
  Echo:           {screen: EchoScreen},
});

const Guideline = createStackNavigator({
  Guideline:      {screen: GuidelineScreen},
});



const Tabs = createBottomTabNavigator({
App:  {
  screen: App, 
  navigationOptions: {
    tabBarLabel: 'Home',
    tabBarIcon: () => (
      <Icon 
            name= {"home"} 
            size={22} 
      />
    )
  }     
},
Echo:  {
  screen: Echo,
  navigationOptions: {
    tabBarIcon: () => (
      <Icon 
        name= {"highlight"} 
        size={22} 
      />
    )
  }     
},
Guideline:{
  screen: Guideline,
  navigationOptions: {
    tabBarIcon: () => (
      <Icon name="import-contacts" size={20} />
    )
  }     
}

}, {
tabBarOptions: { 
activeTintColor: 'black', 
inactiveTintColor: 'black',
activeBackgroundColor: '#fff',
inactiveBackgroundColor: '#fff',
labelStyle: {} }
});

export default createAppContainer(Tabs);
    

変更点は、

1. DefaultNavigationOption
2. const Tabs = createBottomTabNavigator({...})
3. export default createAppContainer(Tabs) とする

です！　
皆様の参考になりますように〜

　

参考記事：
React-Navigation v3の変更点

Invariant Violation: The Navigation props is missing for this navigator. In react-navigation 3 you must set app container