React Navigation でプロフ画面を追加

作成：2023年1月7日
（本記事は次の記事の続きです「[Native Base + React Native + Expo + React Navigation でUIのお試し](https://qiita.com/RYO_/items/4e336fcb4bcc4d9c0008)」）

# Stack Nvigator でProfile画面への遷移を追加

次のコードを App.js に追加します（App.jsへのリンク：[ブランチqiita20230105b](https://github.com/ryoyuki6/native-base-amplify20230101/blob/qiita20230105b/App.js))
```javascript:App.js
...
import { useNavigation } from "@react-navigation/native";
...
function ProfileScreen() {
  const [data1, setData1] = useState([]);

  useEffect(() => {
    fetchData1();
  }, []);

  async function fetchData1() {
    const apiData = await API.graphql({ query: listPeople });
    setData1(apiData.data.listPeople.items);
  }

  console.log(data1);

  return (
    <NativeBaseProvider>
      {/* <Box flex={1} bg="#fff" alignItems="center" justifyContent="center"> */}
      <Box
        bg="primary.500"
        py="4"
        px="3"
        borderRadius="5"
        rounded="md"
        alignSelf="center"
        justifyContent="center"
      >
        <VStack space="2" alignSelf="center">
          <Text fontSize="sm" color="white">
            Profile !!!
          </Text>
        </VStack>
      </Box>
    </NativeBaseProvider>
  );
}
...
          <Stack2.Navigator initialRouteName="Home">
            <Stack2.Screen name="Home" component={HomeScreen} />
            <Stack2.Screen name="Profile" component={ProfileScreen} />
          </Stack2.Navigator>
```

コードを実行します。
```
yarn ios
```
ログイン画面とHome画面とProfile画面です。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/077848da-a913-4cda-9663-e547c50aa5d1.png">
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/4b25dc19-46ce-0787-42cf-d0b9a8bd0a6e.png">
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/23561481-7779-f2b8-a1b6-755b88b01f15.png">



# 途中で出たエラー undefined is not an object

Amplify から GraphQL で取得したJSONデータを表示させる事前準備として、 console.log しようとしたらエラーが出ました。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/79131ce6-4d7e-c934-da97-8eac4f01dc8c.png">

Amplify から GraphQL でデータ取得していない1回目は undefined になっていて、その時にdata0["name"] を表示させようとして「定義されてないよ」とエラーが出ています。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/9cecd336-1779-41b2-f261-58c58a1a3ef8.png">

定義されている時だけ console.log する様にしたらエラー解消できました（[参考のリンク](https://www.javadrive.jp/javascript/var/index6.html#:~:text=%E6%9C%AA%E5%AE%9A%E7%BE%A9%E5%80%A4%E3%81%8C%E6%A0%BC%E7%B4%8D,undefined'%20%E3%81%8C%E8%BF%94%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82&text=typeof%20%E6%BC%94%E7%AE%97%E5%AD%90%E3%81%AE%E6%88%BB%E3%82%8A,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82)）
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/daff1245-be42-37be-3035-cfa2809e9c29.png">
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/150e9388-2638-83d5-00c2-dbc8cdecc9ab.png">

参考
・[JavaScriptの命名規則早見表（と記法）](https://qiita.com/RyosukeSomeya/items/90f8e780b37c53758276)
・[メソッドとは、オブジェクトがプロパティとして持っている関数のことです。](https://tcd-theme.com/2022/05/javascript-function-method.html#:~:text=%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%A8%E3%81%AF%E3%80%81%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%8C,%E3%81%A8%E5%91%BC%E3%82%93%E3%81%A7%E3%81%84%E3%81%BE%E3%81%99%E3%80%82)

# 途中で出たエラー Adjacent JSX elements must be wrapped in an enclosing tag.

Profile画面で、ユーザ情報を複数表示させようとしたら（name, ageなど）、エラーが出ました。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/c1698969-20b3-d048-10e3-c4b697160858.png">
解決策としては、Reactで作成するコンポーネントをトップレベル（一番親となる階層）の要素を一つにする、ことで解決しました（[参考リンク](https://utano.jp/entry/2016/07/react-adjacent-jsx-elements-must-be-wrapped-in-an-enclosing-tag/)）
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/28db837f-f583-c03a-7b99-e9164a8ca325.png">
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/87bb0c25-c099-c8ce-37d5-442ef7084308.png">

以上、React Native + Expo で、GraphQL を使って Amplify からユーザデータを取得して、 React Navigation で画面遷移したProfile画面に Native Base を使ってユーザ情報をまずはテキストで表示させました（コード置き場のGithubリンク：[qiita20230107](https://github.com/ryoyuki6/native-base-amplify20230101/blob/qiita20230107/App.js)）。