发布日期：2023年1月5日
（本文是关于「GraphQL + Amplify + React Native + Expo 数据访问」的续篇）

我打算使用 Native Base 在应用中引入用户界面。
首先我会创建一个项目，并试用使用 Box 组件的部分。
另外，我还会使用 React Navigation 创建一个 Home 页面。

建立项目

使用Native Base创建项目，并逐步添加之前完成的身份验证器和GraphQL。

创建项目

expo upgrade
expo init native-base-amplify20230101 -- template @native-base/expo-template
cd native-base-amplify20230101
yarn

以下是一个Hello World的示例代码。

import React from "react";
import { NativeBaseProvider, Text, Box } from "native-base";

export default function App() {
  return (
    <NativeBaseProvider>
      <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
        <Text>Hello NativeBase !!!</Text>
      </Box>
    </NativeBaseProvider>
  );
}

yarn ios

设置身份验证器

按照这个链接中的步骤进行设置。

yarn add @aws-amplify/ui-react-native aws-amplify react-native-safe-area-context amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill

amplify init
npx expo install @react-native-community/netinfo@9.3.5
yarn ios

使用 auth 更新 App.js。App.js 代码链接为 qiita20230101a 分支。

amplify add auth
amplify push
yarn ios

GraphQL 的设置

按照此链接中的步骤进行设置。
– 数据模型设计
– 数据创建
– 执行amplify pull
– 执行amplify mock

yarn add aws-amplify @react-native-async-storage/async-storage @react-native-community/netinfo

放大推送

npx expo install @react-native-community/netinfo@9.3.5

我仔细研究了NativeBase的Box组件。

关于示例代码的调查

function Example() {
  return <NativeBaseProvider>
      <Box bg="primary.600" py="4" px="3" borderRadius="5" rounded="md" width={375} maxWidth="100%">
        <HStack justifyContent="space-between">
          <Box justifyContent="space-between">
            <VStack space="2">
              <Text fontSize="sm" color="white">
                Today @ 9PM
              </Text>
              <Text color="white" fontSize="xl">
                Let's talk about avatar!
              </Text>
            </VStack>
            <Pressable rounded="xs" bg="primary.400" alignSelf="flex-start" py="1" px="3">
              <Text textTransform="uppercase" fontSize="sm" fontWeight="bold" color="white">
                Remind me
              </Text>
            </Pressable>
          </Box>
          <Image source={{
          uri: 'https://media.vanityfair.com/photos/5ba12e6d42b9d16f4545aa19/3:2/w_1998,h_1332,c_limit/t-Avatar-The-Last-Airbender-Live-Action.jpg'
        }} alt="Aang flying and surrounded by clouds" height="100" rounded="full" width="100" />
        </HStack>
      </Box>
    </NativeBaseProvider>;
}

主要.600：青色调
px：左侧和右侧内边距
py：顶部和底部内边距
HStack
justifyContent: 两端对齐；

参考链接：
https://nativebase.io/
NativeBase 3.0是为React Native应用程序开发而设计的有趣的UI工具包。
– 这里展示的屏幕是基于牛的监视系统U-motion的警报和仪表板部分简化而来的实现。有Dashboard的示例源代码。
NativeBase很好用。
– 文档易于理解（也许这就是为什么文章少的原因？）
– 还有Figma的设计工具包（这是我们采用NativeBase的主要原因之一）
NativeBase 3.0以Utility First的形式焕然一新。
– 3.0版进行了大幅度更新，几乎变成了另一个产品。
nativebase – Figma

在使用React Navigation时进行基本页面跳转的准备工作。

安装核心库

yarn add @react-navigation/native

安装依赖库

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

安装Stack Navigator

yarn add @react-navigation/stack

参考资料
React Navigation
React Native 入门教程从基础开始学习

在Native Base中显示基本的Box布局，并使用React Navigation显示基本的主页界面。

请在App.js中添加以下代码（App.js的链接：分支qiita20230105a）。

...
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
...
return (
    <NativeBaseProvider>
      <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">Hello Native Base !!!</Text>
          <SignOutButton />
        </VStack>
      </Box>
    </NativeBaseProvider>
  );
...
        <NavigationContainer>
          <Stack2.Navigator>
            <Stack2.Screen name="Home" component={HomePage} />
          </Stack2.Navigator>
        </NavigationContainer>

我将执行。

yarn ios