ReactNativeで画面遷移の組み合わせができない

Question

前提・実現したいこと
ReactNativeでcreateMaterialTopTabNavigatorでタブのある画面遷移に加えてcreateStackNavigatorでその一つのページににさらにHomescreen.js内のボタンをクリックしてHealthCheck.js画面遷移できるページを作りたい。

試したこと
createStackNavigatorでHomeとCheckのページを遷移できるようにMainStackで定義し、function MyTabsのcomponentにMainStackを入れましたが実現できませんでした。

App.js↓

import React from 'react';
import SettingScreen from './src/SettingScreen';
import EditScreen from './src/EditScreen';
import HomeScreen from './src/HomeScreen';
import Weather from './src/Weather';
import HealthCheck from './src/HealthCheck';
import { NavigationContainer } from '@react-navigation/native';
import 'react-native-gesture-handler';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { FontAwesome5 } from '@expo/vector-icons';
import {createStackNavigator} from 'react-navigation-stack';


const MainStack = createStackNavigator(
  {
    Home: HomeScreen,
    Check: HealthCheck,
  }
)

const Tab = createMaterialTopTabNavigator();


function MyTabs() {
  return (
    <Tab.Navigator tabBarPosition='bottom'
    tabBarOptions={{
      style: { backgroundColor: '#FFDBC9' },
      showIcon:'true',
    }}>
      <Tab.Screen name="ホーム" component={MainStack}
      options={{
        tabBarLabel:'ホーム',
        tabBarIcon:() => (<MaterialCommunityIcons name="home-heart" size={28} color="black" />)
      }}
      />
      
      <Tab.Screen name="記録" component={SettingScreen}
      options={{
        tabBarLabel:'記録',
        tabBarIcon:() => (<FontAwesome5 name="pencil-alt" size={21} color="black" />)
      }}
      />

      <Tab.Screen name="お天気" component={Weather}
      options={{
        tabBarLabel:'お天気',
        tabBarIcon:() => (<MaterialCommunityIcons name="white-balance-sunny" size={24} color="black" />)
      }}
      />

      <Tab.Screen name="ニュース" component={EditScreen}
      options={{
        tabBarLabel:'ニュース',
        tabBarIcon:() => (<FontAwesome5 name="newspaper" size={24} color="black" />)
      }}      
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer >
      <MyTabs />
    </NavigationContainer>


  );
}

HomeScreen.js↓

import React from 'react';
import { ImageBackground,StyleSheet, Text, Image, Button} from 'react-native';
import { StatusBar } from 'expo-status-bar';



class HomeScreen extends React.Component {
  
    render() {
        return(
      <ImageBackground source={require('../image/header.png')} style={styles.imageBackground}>
        
      <StatusBar style="auto" />

      <Text style={styles.text}>楽しくダイエットしましょう♪</Text>
      <Image 
      source={require('../image/kasamotteikinasai1.png')}
      style={styles.image}
      />

      <Button title='GoTo Stack2' onPress={() => this.props.navigation.navigate('Check')}/>


       </ImageBackground>



        );
    }
}


const styles = StyleSheet.create({
    text: {
      alignItems: 'center',
      justifyContent: 'center',
      textAlign:'center',
      fontSize:20,
      fontWeight:'bold',
      color:'#663333',
      marginLeft:18,
      marginRight:0,
      
    },
  
    imageBackground: {
      flex: 1,
      resizeMode: "cover",
      justifyContent: "center",
      marginLeft:10,
      marginRight:34,
    },
  
    image: {
      height: 200,
      width: 250,
      marginLeft:50,
  
    },
  
  });
  


export default HomeScreen;

今はタブが下部にあるページができておりますが、HomeScreenのButtonを押してもHealthCheck.jsに遷移せず、「TypeError:undefined is not an object (evaluating 'state.routes')」のエラーが出てしまいます。お手数ですが、ご確認いただけますでしょうか。

Answer 1

公式サイトだとこのあたりでしょうか？

- <Button title='GoTo Stack2' onPress={() => this.props.navigation.navigate('Check')}/>
+ <Button title='GoTo Stack2' onPress={() => this.props.navigation.navigate('ホーム', { screen: 'Check' })}/>

（タブの名前は日本語ではない方が良いかもしれません。）