React Navigation でプロフ画面を追加

作成：2023年1月7日
（本記事は次の記事の続きです「Native Base + React Native + Expo + React Navigation でUIのお試し」）

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

次のコードを App.js に追加します（App.jsへのリンク：ブランチqiita20230105b)

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画面です。

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

Amplify から GraphQL で取得したJSONデータを表示させる事前準備として、 console.log しようとしたらエラーが出ました。

Amplify から GraphQL でデータ取得していない1回目は undefined になっていて、その時にdata0["name"] を表示させようとして「定義されてないよ」とエラーが出ています。

定義されている時だけ console.log する様にしたらエラー解消できました（参考のリンク）

参考
・JavaScriptの命名規則早見表（と記法）
・メソッドとは、オブジェクトがプロパティとして持っている関数のことです。

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

Profile画面で、ユーザ情報を複数表示させようとしたら（name, ageなど）、エラーが出ました。

解決策としては、Reactで作成するコンポーネントをトップレベル（一番親となる階層）の要素を一つにする、ことで解決しました（参考リンク）

以上、React Native + Expo で、GraphQL を使って Amplify からユーザデータを取得して、 React Navigation で画面遷移したProfile画面に Native Base を使ってユーザ情報をまずはテキストで表示させました（コード置き場のGithubリンク：qiita20230107）。