解決済
ブログナビゲーション画面に遷移するとエラー画面に遷移してしまう。
ReactNative
Django
miya
2022/08/14 15:33

実現したいこと

はじめてのReact NativeとDjango REST Frameworkスマホアプリ開発
https://www.youtube.com/watch?v=CWVKWtb2UZk&t=910s
20:00辺り、ブログナビゲーションの章通りに、ブログ詳細画面に遷移したい。

発生している問題

BlogNavigateボタンを押すと以下のメッセージが出力されるエラー画面に遷移されてしまう。
Error: Got an invalid value for 'component' prop for the screen 'BlogScreen'. It must be a valid React Component.

ソースコード

import { Text } from 'react-native'

const BlogScreen = ({ navigation }) => {
const selectBlog = (id) => {
navigation.navigate('BlogDetailScreen', {
blogId: id,
})
}

return (
    <Text
        onPress={() => {
            selectBlog(1)
        }}
    >
        ブログいちらん
    </Text>
)

}

自分で試したこと

エラーメッセージをGoogle検索しましたが同様の問題は見つかりませんでした。

補足情報

行
const BlogScreen = ({ navigation }) => {
のBlogScreen文字が灰色がかった色になっています。

回答 4件
login
回答するにはログインが必要です
はる@講師
3年近く前
export default BlogScreen

上記のコードが一番下に書かれていますでしょうか？

miya
3年近く前

なるほど、ありがとうございます。
文字が灰色になっている意味がわかっていれば気付けた問題でしたね。
勉強になりました。

1
はる@講師
3年近く前

関数名が灰色になっているということでした。

「灰色=使用されてない」

なので、関数がexportされてないと気づきました。

miya
3年近く前

指摘の通りコードが抜けていました。
ちょうど見ていた画面に映っていなかったので見落としていたようです。
どうもありがとうございました。
いとも簡単に問題解決されていますが、どういった判断で原因を見つけているんでしょうか？
できる限り今回のようなケアレスミスが原因による質問を避けたいので 原因に辿り着くヒントがありましたら教えてください。

1