タイムリー表示かつ遷移できるようにしたい Reactnaive

Question

困っていること

時計アプリを作るために、
リアルタイム表示を行いたいが、
画面遷移ができなくなってしまった。

参考にした記事

【ReactNative】現在の日付、時間表示をする方法

今のソース

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

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';


const weekday = ['日', '月', '火', '水', '木', '金', '土'];

export default class Home extends React.Component {

  constructor(props) {
      super(props);
      this.state = {
        week: new Date().getDay()
      };
  }
  
    render() {
      return (
        <View style={styles.container}>
          <Text style={styles.text}>this.state.week</Text>
          <Text style={styles.text}>{this.state.week}</Text>
          <Text style={styles.text}>weekday[this.state.week]</Text>
          <Text style={styles.text}>{weekday[this.state.week]}</Text>
          <TouchableOpacity
              onPress={() => navigation.navigate('Abc')}
            >
              <Text>遷移する</Text>
            </TouchableOpacity>
        </View>
      );
    }
  }

// 遷移先
function AbcScreen({ navigation }) {
  return (
    <View>
      <Text>遷移先の画面</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        {/* <Stack.Screen name="Home" component={HomeScreen} /> オプションなしの記述 */}
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'トップ' }}
        />
        <Stack.Screen
          name="Abc"
          component={PunchInScreen}
          options={{ title: '勤務中' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}




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

###スクショ

エラー内容

試したこと

export default class Home extends React.Component {
を
export default class Home({ navigation }) extends React.Component {
としてみた

どなたか、お詳しい方、ご教授いただけると幸いです。

Answer 1

Can't find variable: navigation -> navigationという変数がありません 

というエラーメッセージですので

onPress={() => this.props.navigation.navigate('Abc')}
としてあげればよさそうです！

Comments

[Tatsurou]

ご回答いただきありがとうございます！　また、返信が遅くなり申し訳ありませんでした。